vue基础：非父子组件传值

vue基础：非父子组件传值

本文共用到四个文件：
根组件：App.vue
两个子组件：Home.vue,News.vue
js文件：eveemit.js
文章最后有所有文件

步骤：
1.新建一个js文件，引入vue并实例化，最后暴露这个实例
vueemit.js文件

import Vue from 'vue'

var vueevent =new Vue()

export default vueevent;

2.在要广播的地方映入刚才定义的实例。
Home.vue向News.vue传，就要在Home.vue中广播
先引入

import vueevent from '../model/vueemit.js';

3.通过 vueevent.$emit(‘名称’,‘数据’)

methods:{
       emitnews(){
           vueevent.$emit('to-news',this.msg)
       } 
    }

4.在接受的地方，监听广播
vueevent.$on(‘名称’,‘数据’)

mounted(){
        vueevent.$on('to-news',function(data){
            console.log(data);
        })
    }

效果图：

App.vue

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

<script>
import Home from './components/Home.vue';
import News from './components/News.vue';
export default {
  data(){
    return{

    }
  },methods:{

  },components:{
    'v-home':Home,
    'v-news':News
  }
}
</script>

<style>

</style>

Home.vue

<template>
    <div id="home">
        我是home组件
        <br>
        <button @click="emitnews()">给news传值</button>
        <br>
    </div>
</template>

<script>
//
import vueevent from '../model/vueemit.js';
export default {
    data(){
        return{
            msg:'我是一个home组件'
        }
    },methods:{
       emitnews(){
           vueevent.$emit('to-news',this.msg)
       } 
    },mounted(){
        vueevent.$on('to-home',function(data){
            console.log(data);
        })
    }
}
</script>

<style>

</style>

News.vue

<template>
    <div id="news">
        我是News组件
        <br>
    <button @click="eventhome()">给home传值</button>
    </div>
</template>

<script>
import vueevent from '../model/vueemit.js';

export default {
    data(){
        return{
            msg:'我是一个新闻组件'
        }
    },
    methods:{
        eventhome(){
            vueevent.$emit('to-home',this.msg)
        }
    },
    mounted(){
        vueevent.$on('to-news',function(data){
            console.log(data);
        })
    }
}
</script>

<style>

</style>

vueevent.js

import Vue from 'vue'

var vueevent =new Vue()

export default vueevent;