vu3中的父子组件通讯

一、传统的props

通过在父组件中给子组件传值，然后在子组件中通过props接受数据

 1 //父组件
 2 <ValidateInput
 3      type="text"
 4      v-model="emailVal"
 5      :rules='emailRules'
 6      placeholder='请输入邮箱地址'
 7      ref="inputRef"
 8 >
 9 
10                     
11 //子组件
12 export default defineComponent({
13   name: 'ValidateInput',
14   props: {
15     rules: Array as PropType ,
16     modelValue: String
17   },
18 }

二、通过modeValue绑定

//v-model简写
<ValidateInput
  type="text"
  v-model="emailVal"
  placeholder='请输入邮箱地址'
  ref="inputRef"
 >


//实际上是
<ValidateInput
  type="text"
  :emailVal="emailVal"
  @update:modelValue="方法"
  placeholder='请输入邮箱地址'
  ref="inputRef"
 >


//子组件

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 = (e:KeyboardEvent) => {
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update:modelValue', targetValue)
    }
    return {
      inputRef,
      updateValue
    }
  }

三、事件广播（vue3中$on和$emit已废弃），使用新的插件mitt

Vue3.0版本中把on,off、onece等事件函数移除了，emit（）用于父子组件之间的沟通。

为了能够使用事务总线，除了emit触发函数还得有on监听函数。官方推荐使用第三方库mitt

因此事务总线的使用应该为

首先安装第三方库mitt

npm install --save mitt

然后在程序中使用事件总线：

 1 //父组件接受'form-item-created'频道
 2 
20 
21 //子组件发送信息
22 onMounted(() => {
23       console.log(inputRef.val)
24       emitter.emit('form-item-created', inputRef.val)
25 })