Vue学习16----非父子组件传值

实现步骤：
非父子组件传值
1、新建一个js文件然后引入vue 实例化vue 最后暴露这个实例

    （VueEvent.js）
     import Vue from 'vue';
     var VueEvent = new Vue();
     export default VueEvent;

2、在要广播的地方引入刚才定义的实例
就是引入实例，发送数据
（Home.js）

     import VueEvent from '../model/VueEvent.js';
     VueEmit.$emit('名称','数据');

3、在接收收数据的地方通过 $om接收广播的数据
就是引入实例，接收数据
（News.js）

     import VueEvent from '../model/VueEvent.js';
     VueEmit.$on('名称',function(){
     })

下面是一个例子：

效果图
Vue学习16----非父子组件传值
项目结构：

父组件是App.vue
两兄弟组件组件是
Home.vue
News.vue
封装vue对象的文件是
VueEvent.js
Home.vue传数据给News.vue
下面贴出源代码：
App.vue

<!--非父子组件通信-->
<template>
  <div id="app">
    <iHome></iHome>
    <br/>
    <hr/>
    <iNews></iNews>
  </div>
</template>

<script>

  /*
  非父子组件传值
  1、新建一个js文件   然后引入vue  实例化vue  最后暴露这个实例
    （VueEvent.js）
     import Vue from 'vue';
     var VueEvent = new Vue();
     export default VueEvent;

  2、在要广播的地方引入刚才定义的实例
     就是引入实例，发送数据
     （Home.js）
     import VueEvent from '../model/VueEvent.js';
     VueEmit.$emit('名称','数据');

  3、在接收收数据的地方通过 $om接收广播的数据
     就是引入实例，接收数据
     （News.js）
     import VueEvent from '../model/VueEvent.js';
     VueEmit.$on('名称',function(){
     })
  */
  //引入组件
  import Home from "./components/Home";
  import News from "./components/News";
  export default {
    name: 'app',
    //挂在组件
    components: {
      'iHome':Home,
      'iNews':News,
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

VueEvent.js

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

Home.vue

<template>
  <!--根组件只能有一个-->
  <div>
    <div>Home组件</div>
    <button @click="emitNews()">给News组件广播数据</button>
  </div>
</template>

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

  export default {
    name: "Home",
    data() {
      return {
        msg: 'home中的数据',
      }
    },
    methods: {
      emitNews() {
        //广播数据
        VueEvent.$emit('data', this.msg)
      },
    },
  }
</script>

<style scoped>

</style>

News.vue

<template>
  <div>
    News组件
   <div>{{msg}}</div>
  </div>
</template>

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

  export default {
    name: 'news',
    data(){
      return{
        msg:'',
      }
    },

    mounted() {
      //接收数据
      //监听news 广播的数据
      VueEvent.$on('data',  (data)=> {
        this.msg = "news中接收到数据"+data;
      })
    }
  }
</script>

<style scoped>

</style>

源码下载：
vuedemo16
https://download.csdn.net/download/zhaihaohao1/11112029