1.props
父传子
1)defineProps 接收与props相同的值。
2)defineProps 在选项传入后，会提供恰当的类型推断。
3)传入到 defineProps 的选项会从 setup中提升到模块的范围。因此，传入的选项不能引用在 setup 范围中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块范围内。
小例子↓
//父组件
<template>
<div class="box">
<h1>组件间通信: props</h1>
<div>chiyuT:{{ chiyuT }}</div>
<div>obj.name:{{ obj.name }}</div>
<div>obj.age:{{ obj.age }}</div>
<Child :chiyuT="chiyuT" :obj="obj" :fn="fn" :changeObj="changeObj"></Child>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Child from './Child.vue';
// 字符串
const chiyuT = ref("三天打鱼")
//对象
const obj = ref({
name:'池渔',
age:18
})
//函数
const fn = ( str:string ) => {
chiyuT.value += str
}
//子修改obj
const changeObj = (str:string) => {
obj.value.name += str
}
</script>
//子组件
<template>
<div class="box">
<h3>Child</h3>
<div>chiyuT:{{ chiyuT }}</div>
<button @click= "fn('鱼')">修改chiyuT</button><br>
<div>obj.name:{{ obj.name }}</div>
<div>obj.age:{{ obj.age }}</div>
<button @click="changeObj">修改obj</button>
</div>
</template>
<script lang="ts" setup>
// Ts写法
const props = defineProps<{
//父给子传的字符串
chiyuT: string,
//父给子传的对象
obj: {
name: string
age: number
},
//父给子传的函数
fn: (str:string) => void
changeObj: (str:string) => void
}>()
//修改obj
const changeObj = () => {
props.changeObj('吃鱼')
}
</script>
注意: defineProps()会返回一个对象,这个对象可以直接.出数据
