vue3中的父子组件通讯详情
作者：DvorakChen
这篇文章主要介绍了vue3中的父子组件通讯详情，文章以传统的props展开主题相关资料内容，具有一定参考价值，需要的小伙伴可以参考一下
一、传统的props
通过在父组件中给子组件传值，然后在子组件中通过props接受数据
//父组件
<ValidateInput
type="text"
v-model="emailVal"
:rules='emailRules'
placeholder='请输入邮箱地址'
ref="inputRef"
>
</ValidateInput>
//子组件
export default defineComponent({
name: 'ValidateInput',
props: {
rules: Array as PropType <RulesProp>,
modelValue: String
},
}二、通过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
然后在程序中使用事件总线：
//父组件接受'form-item-created'频道
<script lang="ts">
import { defineComponent, onUnmounted } from 'vue'
import mitt from 'mitt'
export const emitter = mitt()
export default defineComponent({
name: 'ValidateForm',
setup () {
const callback = (test: string) => {
console.log(test)
}
emitter.on('form-item-created', callback)
onUnmounted(() => {
emitter.off('form-item-created', callback)
})
return {}
}
})
</script>
//子组件发送信息
onMounted(() => {
console.log(inputRef.val)
emitter.emit('form-item-created', inputRef.val)
})到此这篇关于vu3中的父子组件通讯详情的文章就介绍到这了,更多相关vu3组件通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！