广播

提示

发出广播之前要先监听事件
基于以上特性在页面首次加载时监听不到,因此可以在父组件加一个开关,子组件声明周期加载好以后先广播改变子组件开关状态 ,然后再监听

注意

广播实际上加载在全局的,因此不建议轻易使用广播

1建立广播模块化js(本质就是另一个vue实例)

src/model/vueEvent.js

import Vue from 'vue';
 
var VueEvent = new Vue();
 
export default VueEvent;

如果有特殊需要也可以如下 也就是统一监听再获取值

import Vue from 'vue'

const event = new Vue({
  data()
  {
    return {
      // 定义数据
      data: {
        addMenuForm: {},
        updateMenuFrom: {}
      }
    }
  },
  created()
  {
    // 监听
    // 监听添加菜单
    this.$on('addChildMenu', (param) =>
    {
      console.log(param)
      this.addMenuForm = param
    })

    // 监听跟新菜单
    this.$on('updateMenu', (data) =>
    {
      this.updateMenuFrom = data
    })
  }
})

export default event

2分别在两个没有关联的组件内引入广播模块,或者添加为公共模块

3发起广播

VueEvent是模块化引入的值,该名称可以自定义

VueEvent.$emit('名称',值);

src/components/pc/home/v_home_byvalue_one.vue

<template>
   <div class="byvalue_one">
      <div>
         {{ title }}
      </div>
      <div>
         我是父组件传递过来的{{ parame }}
      </div>
      <div>
         <button @click="pick">父弹出</button>
         <button @click="getParent()">获取整个父组件对象</button>
      </div>
      <div>
          <button @click="saytwo()">向2组件发送消息</button>
      </div>
   </div>
</template>
 
<script>
import vueEvent from "@/model/vueEvent.js";
export default {
 
  name: 'byvalue_one',
 
 
  data() 
  {
    return {
      title:"我是组件传值1测试"
    };
  },
  //写法一
  props:['parame','pick','self'],
  //写法二
  props:
  {
    parame:String,
    pick:Function,
    self:Object
  },
  methods:
  {
   getParent()
   {
      console.log(this.self);
      console.log(this.self.title);
   },
   saytwo()
   {
      vueEvent.$emit('saytwo',this.title);
   }
  }
};
</script>
 
<style lang="css" scoped>
.byvalue_one
{
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
}
</style>

4监听广播(注意需要先监听)

VueEvent是模块化引入的值,该名称可以自定义

vueEvent.$on('广播处定义的名称',function(data)
     {
       console.log(data);
     });

data形参代表的是广播处传递的值
src/components/pc/home/v_home_byvalue_two.vue

<template>
   <div class="byvalue_two">
      <div>
         {{ title }}
      </div>
      <div>
         <button @click="getParent()">主动获取父组件传值</button>
      </div>
   </div>
</template>
 
<script>
import vueEvent from "@/model/vueEvent.js";
export default {
  name: 'byvalue_two',
  data() 
  {
    return {
      title:"我是组件传值2测试"
    };
  },
  methods:
  {
   getParent()
   {
      console.log(this.$parent.title);
   }
  },
  mounted()
  {
     vueEvent.$on('saytwo',function(data)
     {
       console.log(data);
     });
  }
};
</script>
 
<style lang="css" scoped>
.byvalue_two
{
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
}
</style>