vue之非父子组件传值

如何进行非父子组件传值，下面举例说明。

比如说有两个兄弟组件要进行传值，我们把这两个兄弟组件当做两个城市，一个是home城市，一个news城市。我们把传值当做发送快递。

我们想要发送快递就的有一辆专门的快递车，来帮助我们传递快递，并且要求这辆快递车是可以全国都可以跑的，也就是说我们需要定义一个Vue的实例对象，这个Vue实例对象就是我们的快递车。

有了快递车，我们发送的时候需要叫快递车过来我们这里拿邮件，所以我们必须在home里引入这个快递车，也就是Vue实例对象。然后把我们的快递打包写上我们的名字装到快递车里，然后通过 $emit 发送给news。

news也需要引入快递车来接收快递，通过 $on 指定接受的快递名称来接收数据。

这样就实现了非父子组件的传值。

示例：Home组件给News组件传值

1.首先，我们需要打造一辆快递车，我们在 src目录下创建一个model目录来存放我们的车工场。车工场名称随意，在这里我们命名为 VueEvent.js ，这里车工场就是用来生产快递车。

a.创建车工场

b.在车工场里生产快递车

// VueEvent.js文件

import Vue from 'vue';

var VueEvent = new Vue();
export default VueEvent

// 通过vue实例化出一个名称VueEvent对象，这个VueEvent就是我们的快递车；
// export default VueEvent 将VueEvent实例暴露，也就是把我们的快递车投入到使用中。如果不暴露的话，大伙就不能使用。

2. 在Home组价里操作

a. 先引入这个快递车到home里，也就是引入VueEvent这个对象

// 在script标签里引入

import VueEvent from '../model/VueEvent.js'

b. 我们给home中的一个button按钮绑定一个事件。

<template>
  <div>
    首页组件
    <br>
    <button @click="emitNews()">给news组件广播数据</button>
  </div>
</template>

c. 我们定义一个emitNews方法，当按钮点击时执行方法。

<script>
  import VueEvent from '../model/VueEvent.js'
  export default {
    name:"home",
    data(){
      return {
        msg:"我是一个home组件",
      }
    },
    methods:{
      emitNews(){
        VueEvent.$emit('to-news',this.msg)
      }
    },
  }
</script>

// emitNews方法中，我们通过快递车 VueEvent 的包裹 $emit，将我们的数据 this.msg 放入里面并贴上标签 to-news.
// 当该方法执行时，快递车就会把这个快递给我们邮走，快递车会一直在全国广播这，这个快件的名臣，各组件都在一直监听着 ，如果是自己想要的快件就直接告诉快递车拿过来

3. 在News组件里操作

a.我们也需要引入快递车，不管是发送还是接受都需要这个快递车，所以第一步我们先引入。

// script标签里

import VueEvent from '../model/VueEvent.js'

b. 因为快递车发快件的方式是广播，也就是说只有一只监听才可以知道有没有我们想要的这快件，所以我们要在 mounted 这个监听钩子里写代码。

<script>
  import VueEvent from '../model/VueEvent.js'
  export default {
    name:"news",
    data(){
      return {
        msg:"我是一个news组件",
      }
    },
    mounted() {
      VueEvent.$on('to-news',(data)=>{
        console.log(data);
      })
    },
  }
</script>

// 在mounted函数里会一直监听，监听 VueEvent 这两车，如果有广播，则通过 $on 来接收快件，要接收的快件名为 to-news ，data就是我们的快件里的数据

4. 我们验证一下，实验中，我们写了双向的传值，就是home可以给news组件传值，news可以给home传值，道理都是一样的。