父子组件传递方法（vu3中的父子组件通讯）
导读：一、传统的props...
一 、传统的props
通过在父组件中给子组件传值 ，然后在子组件中通过props接受数据
二 、通过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 })
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！