Vue.js之组件间的通信

cloudOnSkyline

已于 2022-08-16 11:47:34 修改

阅读量613

点赞数 1

分类专栏： JavaScript 文章标签： vue.js 前端 javascript

于 2022-07-19 19:20:02 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125878883

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

一、事件中心

二、$bus

三、第三方包pubsub-js

一、事件中心

前面已经介绍了父子组件中如何进行数据的传递，本文将介绍兄弟组件间数据的传递，核心是利用事件中心进行自定义事件的声明和监听（另外还有删除）

1.定义事件中心

2.在组件Tom中声明自定义事件，同时传递数据

3.在组件Jerry中的mounted函数中监听该事件，获取到num的值，进而完成相关操作

另外，可以销毁自定义事件，也是通过事件中心来销毁

案例效果：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 例子：组件Tom和组件Jerry相互传递自身的num数据 -->
    <style>
        .Tom {
            border: 2px solid red;
            width: 100px;
            margin-bottom: 50px;
        }
        
        .Jerry {
            border: 2px solid red;
            width: 100px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <Tom class="Tom"></Tom>
        <Jerry class="Jerry"></Jerry>
        <div>
            <button @click='deleteE' v-text="'销毁事件'"></button>
        </div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        // 1.定义事件中心
        let hub = new Vue();
        Vue.component('Tom', {
            data: function() {
                return {
                    count: 0,
                    num: 100
                }
            },
            // 2.在组件Tom中声明自定义事件，同时传递数据
            template: `<div><div v-text="'Tom:'+count"></div><button @click="hub.$emit('JerryE',num)">点击</button></div>`,
            mounted() {
                hub.$on('TomE', (val) => {
                    this.count += val;
                })
            }

        });
        Vue.component('Jerry', {
            data: function() {
                return {
                    count: 0,
                    num: 1000
                }
            },
            template: `<div ><div v-text="'Jerry:'+count"></div><button @click="hub.$emit('TomE',num)">点击</button></div>`,
            // 3.在组件Jerry中的mounted函数中监听该事件，获取到num的值，进而完成相关操作
            mounted() {
                hub.$on('JerryE', (val) => {
                    this.count += val;
                })
            }
        })
        let vu = new Vue({
            el: '#app',
            data: {},
            methods: {
                deleteE() {
                    // 另外，可以销毁自定义事件，也是通过事件中心来销毁
                    hub.$off('TomE');
                    hub.$off('JerryE');
                }
            }
        })
    </script>
</body>

</html>

二、$bus

核心使用：首先在main.js中通过生命周期函数配置$bus.

组件在相互通信时，首先明确哪个向哪个传数据。要发送数据的一方需绑定事件，通过emit发送指定的数据。接受数据的一方需要在mounted函数中监听该自定义事件，从而获取传送过来的值。off是解除emit声明的自定义事件。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'


Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
}).$mount('#app')

<template>
  <div>
    <div>名称: {{cname}}</div>
    <div>ID: {{id}}</div>
    <div><button @click="getID">点击</button></div>
     <div><button @click="mydestroy">销毁</button></div>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
name:'ChildA',
data(){
  return {
    cname:'组件A',
    id:1
  }
},
methods:{
  getID(){
    this.$bus.$emit('getAID',this.id)
  },
  mydestroy(){
    this.$destroy();
  }
},
mounted(){
  this.$bus.$on('getBname',(n)=>{
    console.log('A组件获取B组件名称:',n);
  })
  this.publd = pubsub.subscribe('content',(n,msg)=>{
    console.log(n,msg);
  })
  
},
beforeDestroy(){
  // 取消订阅"content"
  // pubsub.unsubscribe(this.publd);
  // 取消bus事件(getAID)
  this.$bus.$off('getAID');
}
}
</script>

<style>

</style>

<template>
  <div>
    <div>名称: {{cname}}</div>
    <div>ID: {{id}}</div>
    <div><button @click="sendName">点击传name</button></div>
    <div><button @click='sendMsg'>发布内容</button></div>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
name:'ChildB',
data(){
  return {
    cname:'组件B',
    id:2,
    msg:'这是组件B中的内容'
  }
},
methods:{
  sendName(){
    this.$bus.$emit('getBname',this.cname)
  },
  sendMsg(){
    pubsub.publish('content',this.msg)
  }
},
mounted(){
  this.$bus.$on('getAID',(id)=>{
    console.log('B组件获取了A组件的id:',id);
  })
}

}
</script>

<style >

</style>

三、第三方包pubsub-js

安装该包，首先弄清数据的发送方和接受方。发送方发布数据（名称加内容），接收方接受数据（在mounted中写）。取消订阅用unsubscribe.

cloudOnSkyline

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js之组件间的通信

3.在组件Jerry中的mounted函数中监听该事件，获取到num的值，进而完成相关操作。前面已经介绍了父子组件中如何进行数据的传递，本文将介绍兄弟组件间数据的传递，核心是利用。2.在组件Tom中声明自定义事件，同时传递数据。另外，可以销毁自定义事件，也是通过事件中心来销毁。进行自定义事件的声明和监听（另外还有删除）......
复制链接

扫一扫