vu3中的父子组件通讯(vue3父子组件通信)

一、传统的props 通过在父组件中给子组件传值，然后在子组件中通过props接受数据 1 //父组件 2 <ValidateInput 3 type="text" 4 v-model="emailVal" 5 :rules='emailRules' 6 placeholder='请输入邮箱地址' ...

推荐整理分享vu3中的父子组件通讯(vue3父子组件通信)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:父子组件v-model,vue父子组件v-model,父子组件v-model,vue父子组件是什么,vue父子组件是什么,vue父子组件mounted顺序原因,父子组件v-model,vue3父子组件,内容如对您有帮助，希望把文章链接给更多的朋友！

一、传统的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: String17 },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 })