vue父子组件之间的通讯,vue中父子组件通信方式
这篇文章主要介绍了vue3中的父子组件通讯详情，文章以传统的小道具展开主题相关资料内容，具有一定参考价值，需要的小伙伴可以参考一下
目录
一、传统的小道具二、通过模式值绑定三、事件广播(vue3中$on和$emit已废弃),使用新的插件手
一、传统的props
通过在父组件中给子组件传值，然后在子组件中通过小道具接受数据
//父组件
验证输入
type=text
v-model=emailVal
:rules=emailRules
占位符=请输入邮箱地址
ref=inputRef
/ValidateInput
//子组件
导出默认定义组件({
名称：有效输入，
道具：{
规则：数组作为支柱类型规则道具，
模型值：字符串
},
}
二、通过modeValue绑定
//虚拟模型简写
验证输入
type=text
v-model=emailVal
占位符=请输入邮箱地址
ref=inputRef
/ValidateInput
//实际上是
验证输入
type=text
:emailVal=emailVal
@update:modelValue=方法
占位符=请输入邮箱地址
ref=inputRef
/ValidateInput
//子组件
模板
div class=inputItem
投入
type=text
:value=inputRef.val
@input=updateValue
id=埃米尔
/div
/模板
导出默认定义组件({
名称：有效输入，
道具：{
规则：数组作为支柱类型规则道具，
模型值：字符串
},
设置（道具、上下文){
const inputRef=reactive({
val: props.modelValue ，
isError: false，
消息：""
})
const updateValue=(e:键盘事件)={
const目标值=(e . target as HTMLInputElement).价值
inputRef.val=目标值
context.emit(更新：模型值，目标值)
}
返回{
输入参考，
更新值
}
}
三、事件广播（vue3中$on和$emit已废弃），使用新的插件mitt
Vue3.0版本中把开，关，一次等事件函数移除了，发出()用于父子组件之间的沟通。为了能够使用事务总线，除了发射触发函数还得有在监听函数。官方推荐使用第三方库手
首先安装第三方库手
新公共管理安装-保存手
然后在程序中使用事件总线：
//父组件接受表单-项目-已创建频道
脚本语言
从“vue”导入{ defineComponent，onUnmounted }
从“米特”导入手
export const emitter=mitt()
导出默认定义组件({
名称：有效表单，
setup () {
常数回调=(测试：字符串)={
console.log(测试)
}
emitter.on(表单-项目-已创建，回调)
未安装(()={
emitter.off(表单-项目-已创建，回调)
})
返回{}
}
})
/脚本
//子组件发送信息
onMounted(()={
console.log(inputRef.val)
emitter.emit(表单-项目-已创建，inputRef.val)
})
到此这篇关于vu3中的父子组件通讯详情的文章就介绍到这了，更多相关vu3组件通讯内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。