父传子接:props
子传父接:$emit发送自定义事件,注意在vue3中要在emits选项中定义自定义事件
vue3中取消了$on,$off,$once, 不能使用事件总线的方式了
方式一:provide/inject
定义要发送的数据:provide
定义接收的数据:inject
// 父组件传递数据
provide: {
msg: "我是小仙女",
emotion: "超级开心"
}
//接收数据的组件
inject:['msg','emotion']
注意:provide中定义的数据不能在本组件中使用
一般provide最好写成一个函数返回一个对象,可以获取到data中的数据。要想provide中数据变成响应式的,用computed包裹。
import {computed} from 'vue'
// 向非父组件传递数据
provide() {
return {
msg: "我是小仙女",
emotion: "超级开心",
numsLength: computed(() => this.nums.length)
};
},
data() {
return {
nums: [1, 2, 3],
};
},
方式二:使用mitt库
安装mitt
npm install mitt
封装一下,文件utils/mitt.js
import mitt from "mitt";
const bus = mitt()
export default bus
层级关系:subChild1<Child1 <App.vue
App.vue和subChild1通信
App.vue 传递数据
<template>
<child1></child1>
<button @click="send">send</button>
</template>
<script>
import Child1 from "./Child1.vue";
import bus from "./utils/mitt";
export default {
components: {
Child1
},
data() {
return {
message:'你好吖'
}
},
methods: {
send() {
bus.emit("send", this.message);//发送数据
}
}
};
</script>
subChild1.vue 接收数据
<template>
<div>{{text}}</div>
</template>
<script>
import bus from './utils/mitt'
export default {
name:'SubChild1',
data() {
return {
text:''
}
},
created() {
bus.on('send',(data) =>{// 接收数据
this.text = data
})
},
}
</script>
发送数据:bus.emit('‘事件类型”,数据)
接收数据:bus.on(’'事件类型”,回调函数)
本文介绍了在Vue3中如何进行父子组件间的通信,包括使用`provide/inject`以及 mitt 库实现事件总线。在Vue3中,`$on`, `$off`, `$once`已被移除,不能直接使用事件总线。通过`provide`在父组件定义并传递数据,子组件通过`inject`来接收。同时,文章展示了mitt库的安装和使用,用于不同层级组件间通信。通过`bus.emit`发送数据,`bus.on`监听并接收数据。
1534

被折叠的 条评论
为什么被折叠?



