vu3中的父子組件通訊

一、傳統的props

通過在父組件中給子組件傳值，然後在子組件中通過props接受數據

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

二、通過modeValue綁定

//v-model簡寫
<ValidateInput
  type="text"
  v-model="emailVal"
  placeholder='請輸入郵箱地址'
  ref="inputRef"
 >
</ValidateInput>

//實際上是
<ValidateInput
  type="text"
  :emailVal="emailVal"
  @update:modelValue="方法"
  placeholder='請輸入郵箱地址'
  ref="inputRef"
 >
</ValidateInput>

//子組件
<template>
  <div class="inputItem">
    <input
      type="text"
      :value="inputRef.val"
      @input="updateValue"
      id="emial"
      >
  </div>
</template>
export default defineComponent({
  name: 'ValidateInput',
  props: {
    rules: Array as PropType <RulesProp>,
    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 <script lang="ts">
 3 import { defineComponent, onUnmounted } from 'vue'
 4 import mitt from 'mitt'
 5 export const emitter = mitt()
 6 export default defineComponent({
 7   name: 'ValidateForm',
 8   setup () {
 9     const callback = (test: string) => {
10       console.log(test)
11     }
12     emitter.on('form-item-created', callback)
13     onUnmounted(() => {
14       emitter.off('form-item-created', callback)
15     })
16     return {}
17   }
18 })
19 </script>
20 
21 //子組件發送信息
22 onMounted(() => {
23       console.log(inputRef.val)
24       emitter.emit('form-item-created', inputRef.val)
25 })