一、非父子通信 --- event bus 事件总线
作用：非父子组件之间进行简易的消息传递
步骤：
1、创建一个都能访问到的事件总线（空vue实例）--- utils/EventBus.js
import Vue from 'vue'
export default new Vue({})2、 接收方（A组件），监听Bus实例的事件
<script>
import bus from '@/bus'
export default {
created() {
bus.$on('sendInfo', val => {
console.log('接收的数据：' + val)
})
},
}
</script>3、 发送方（B组件），触发Bus实例的事件
<button @click="send">发送数据</button>
<script>
import bus from '@/bus' // @代表src文件夹
export default {
methods: {
send() {
bus.$emit('sendInfo', '发送的数据')
},
},
}
</script>点击B组件的按钮后，控制台会输出对应内容。如下所示：
二、非父子通信 --- provide & inject
作用：跨层次共享数据，但只能层层向下
步骤：
1、父组件provide提供数据
<template>
<div>
<Son></Son>
</div>
</template>
<script>
import Son from './components/Son.vue'
export default {
data() { return {} },
provide: {
// 传递给下层的数据
user: { name: 'John', age: '18' },
},
components: { Son, },
}
</script>2、子/孙组件 inject取值使用
<template>
<div>
<h2>儿子组件--{{ user.name }}</h2>
<hr />
<GrandSon></GrandSon>
</div>
</template>
<script>
import GrandSon from './GrandSon.vue'
export default {
name: 'SonPage',
// inject取值
inject: ['user'],
components: { GrandSon, },
}
</script><template>
<div>
<h3>孙子组件 -- {{ user.age }}</h3>
</div>
</template>
<script>
export default {
inject: ['user'],
}
</script>结果如下：
注意：
1、传递的数据如果是对象，则是响应式的
2、传递其他格式的数据，则是非响应式的文章来源：https://www.toymoban.com/news/detail-803451.html
3、若要改为响应式的，可使用computed（不推荐！！！）文章来源地址https://www.toymoban.com/news/detail-803451.html
import { computed } from 'vue'
provide: {
// 传递给下层的数据
user: { name: 'John', age: '18' },
phone: computed('1212121')
},到了这里，关于VUE--组件通信（非父子）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
