14、非父子组件传值

APP.vue根据组件引入了首页组件和新闻组件，首页组件和新闻组件可以通过事件广播的形式进行传值。

1、新建js文件，引入空的Vue实例，并暴露Vue实例

vueEvent.js代码：

import Vue from 'vue';

let VueEvent = new Vue();

export default VueEvent;

2、 APP.vue引入首页组件和新闻组件

<template>
  <div id="app">
    <v-home></v-home>
    <hr/>
    <v-news></v-news>
  </div>
</template>

<script>
  import Home from './components/Home.vue';
  import News from './components/News.vue';

  export default {
    mounted() {
    },
    components: {
      'v-home': Home,
      'v-news': News
    }
  }
</script>

3、首页组件引入VueEvent实例，通过VueEvent.$emit('名称','数据')广播数据

<template>
  <div>
    <h2>首页</h2>
    <br/>
    <button @click="emitNews">向新闻组件广播数据</button>
  </div>
</template>

<script>

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

  export default {
    data() {
      return {
        title: '首页组件'
      }
    },
    methods: {
      emitNews() {
        VueEvent.$emit("data", this.title);
      }
    }
  }
</script>

4、新闻组件引入VueEvent实例，通过VueEvent.$on('名称',...)监听接收数据

<template>
  <div>
    <h2>新闻页</h2>
    {{title}}
  </div>
</template>

<script>
  import VueEvent from '../model/vueEvent.js';

  export default {
    data() {
      return {
        title: ""
      }
    },
    mounted() {
      VueEvent.$on("data", (data) => {
        this.title = data;
      })
    }
  }
</script>