|
一、父组件向子组件传参
1.父组件中，字符串类型直接传参，其他所有类型均通过v-bind绑定传参，示例如下
import {reactive} from 'vue'
comst data1 = reactive([1,2,3])
2.子组件中接收父组件参数
定义类型type，后调用defineProps方法，该方法无需在Vue中引用，可直接使用
{{tittle}}{{data}}
//定义类type
type Props = {
title:string,
data:number[]
}
defineProps()
//或直接写在内部(对象写法)
defineProps<
{
title:String,
data:number[]
}>()
进阶写法 可以直接在type定义时，进行Props校验
const Props = defineProps()
二、子组件向父组件传参
1. 子组件直接通过 $emit 来发送 一个事件参数 例如
click me
//父组件中
//vue3官方文档中介绍，像组件与 prop 一样，事件的名字也提供了自动的格式转换。
注意这里我们触发了一个以 camelCase 形式命名的事件，
但在父组件中可以使用 kebab-case 形式来监听。
与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。
即 addEvent 会自动解析为add-event 并且由于代码位置及风格匹配，提高了模板的可读性
官方推荐利用这种代码特性 来书写 prop 及事件
{{count}}
|