vue3中的父子组件通讯详情 vue3中的父子组件通讯详情

一、传统的props
二、通过modeValue绑定
三、事件广播（vue3中$on和$emit已废弃），使用新的插件mitt

【vue3中的父子组件通讯详情】
一、传统的props 通过在父组件中给子组件传值，然后在子组件中通过props接受数据

//父组件 //子组件 export default defineComponent({name: 'ValidateInput',props: {rules: Array as PropType ,modelValue: String}, }

二、通过modeValue绑定

//v-model简写//实际上是//子组件export default defineComponent({name: 'ValidateInput',props: {rules: Array as PropType ,modelValue: String},setup (props, context) {const inputRef = reactive({val: props.modelValue || '',isError: false,message: ''})const updateValue = https://www.it610.com/article/(e:KeyboardEvent) => {const targetValue = https://www.it610.com/article/(e.target as HTMLInputElement).valueinputRef.val = targetValuecontext.emit('update:modelValue', targetValue)}return {inputRef,updateValue}}

三、事件广播（vue3中$on和$emit已废弃），使用新的插件mitt Vue3.0版本中把on,off、onece等事件函数移除了，emit（）用于父子组件之间的沟通。为了能够使用事务总线，除了emit触发函数还得有on监听函数。官方推荐使用第三方库mitt
首先安装第三方库mitt