VUE组件通信--bus兄弟传值、props父子传值、vuex数据公用

VUE组件通信–bus兄弟传值、props父子传值、vuex数据公用

一、bus通常使用在兄弟与兄弟组件之间

在组件中，使用emit 、on、off分别来分发，监听，取消监听事件 这里的off可以取消多次使用bus监听的事件

1、使用用法

• 新建bus.js文件，引入vue

import Vue from 'vue'

const bus = new Vue();// 使用 Event Bus

export default bus;

• 在main.js中引入vue bus (也可以在使用的组件中引入)

import Bus from './common/bus';   

Vue.prototype.$bus = Bus

• 使用

this.$bus.$emit("Page",value); //很像父子之间传值的方法

• 接收

this.$bus.$on("Page", v =>{
        //vaPage传的时候的key是什么接收就必须是什么
           console.log(v);   //v是传来的值，可以接收多个参数
           })

• 销毁

  beforDestroy（）{
     
     this.$bus.$off("Page");  //当这个组件销毁的时候bus也跟着一起销毁
 }

2、案例(召唤登录弹窗)

bus.js

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;

源头：header.vue(部分代码)

使用：qiyeHeader.vue(部分代码)

 收藏

          

二、props父子传值（单向数据流）

父组件传值：vippage.vue

:datas="vipdatas

子组件接值：vipList.vue

接值----props: {},

监听----watch: {},

三、vuex数据公用

点击查看详情：vuex数据公用