## 1.父傳子：與vue2一樣
```
//傳遞數據給子組件
data : [{id : 1,name:"Zhangsan"},{id : 2 , name : "Lisi"}]
<Menu v-bind:data="data" title="標題"></Menu>
```
### 子組件接收，通過defineProps 來接受?**defineProps是無須引入的直接使用即可**
```
//正常接收
defineProps({
title:{
default:"",
type:string
},
data:Array
})
//ts接收方式
<script setup lang="ts">
defineProps<{
title:string,
data:number[]
}>()
</script>
```
TS 特有的默認值方式
withDefaults是個函數也是無須引入開箱即用接受一個props函數第二個參數是一個對象設置默認值
```
type Props = {
title?: string,
data?: number[]
}
withDefaults(defineProps<Props>(), {
title: "張三",
data: () => [1, 2, 3]
})
```
## 2.子傳父
```
<template>
<div class="menu">
<button @click="submit">子傳父</button>
</div>
</template>
//寫法一：script + setup
<script setup lang="ts">
const emit = defineEmits(['submit']);
//如果用了ts可以這樣兩種方式
// const emit = defineEmits<{
// (e: "submit", name: string): void
// }>()
const clickTap = () => {
emit('submit', “測試”)
}
</script>
寫法二：export + 組合式api
export default {
emits: ["btn1"],//觸發的方法，需要定義，否則會出現警告
props : ["msg"],//接收參數
setup(props, ctx) {
const appPro = inject("appPro");
const appPro1 = inject("appPro1");
console.log(props, "2222");
const btn1 = () => {
ctx.emit("btn1", "子組件");
};
//方法和變量需要retrun出去
return {
btn1,
appPro,
appPro1
};
},
};
```
## 3.依賴注入
```
父組件
<script setup>
import home from "./components/home.vue";
import { provide, reactive, ref } from "vue";
provide("appPro",ref("app"))
provide("appPro1",ref("app1"))
</script>
子組件
<script setup>
import { defineProps, defineEmits, inject } from "vue";
const appPro = inject("appPro")//獲取依賴參數
const appPro1 = inject("appPro1")
const emits = defineEmits("btn");
const props = defineProps({
msg: "string",
});
</script>
```
## 4.插槽
```
//子組件
<template>
<div>
//默認插槽
<slot></slot>
</div>
//具名插槽
<slot name="son"></slot>
</template>
//父組件
<home msg="hello" @btn1="btn">
<template #son>我是插槽內容</template>
<template #default>我是默認插槽內容</template>
</home>
```
