VUE--组件通信(非父子)

一、非父子通信 --- event bus 事件总线

作用:非父子组件之间进行简易的消息传递

步骤:

1、创建一个都能访问到的事件总线(空vue实例)--- utils/EventBus.js

javascript 复制代码
import Vue from 'vue'
export default new Vue({})

2、 接收方(A组件),监听Bus实例的事件

javascript 复制代码
<script>
import bus from '@/bus'
export default {
  created() {
    bus.$on('sendInfo', val => {
      console.log('接收的数据:' + val)
    })
  },
}
</script>

3、 发送方(B组件),触发Bus实例的事件

javascript 复制代码
<button @click="send">发送数据</button>

<script>
import bus from '@/bus' // @代表src文件夹
export default {
  methods: {
    send() {
      bus.$emit('sendInfo', '发送的数据')
    },
  },
}
</script>

点击B组件的按钮后,控制台会输出对应内容。如下所示:

二、非父子通信 --- provide & inject

作用:跨层次共享数据,但只能层层向下

步骤:

1、父组件provide提供数据

javascript 复制代码
<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取值使用

javascript 复制代码
<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>
javascript 复制代码
<template>
  <div>
    <h3>孙子组件 -- {{ user.age }}</h3>
  </div>
</template>

<script>
export default {
  inject: ['user'],
}
</script>

结果如下:

注意:

1、传递的数据如果是对象,则是响应式的

2、传递其他格式的数据,则是非响应式的

3、若要改为响应式的,可使用computed(不推荐!!!

javascript 复制代码
import { computed } from 'vue'

provide: {
    // 传递给下层的数据
    user: { name: 'John', age: '18' },
    phone: computed('1212121')
},
相关推荐
@小红花21 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵23 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲38 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年41 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html