Vue小白教程：组件传值（三）

非父子组件传值

1、新建一个js文件   然后引入vue  实例化vue  最后暴露这个实例
2、在要广播的地方引入刚才定义的实例
3、通过 VueEmit.$emit('名称','数据')
4、在接收收数据的地方通过 $om接收广播的数据
    VueEmit.$on('名称',function(){  
		方法
	})

新建js文件VueEvent

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

Home

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">    
       我是首页组件
       <br>
       <button @click="emitNews()">给News组件广播数据</button>
        <br>
    </div>
</template>

<script>
	//引入 vue实例
    import VueEvent from '../model/VueEvent.js';
    export default{
        data(){
            return {               
               msg:'我是一个home组件',
               title:'首页111'
            }
        },methods:{
            emitNews(){
                //广播数据
                VueEvent.$emit('to-news',this.msg)
            }
        },
        mounted(){
            //监听news 广播的数据
            VueEvent.$on('to-home',function(data){
                console.log(data);
            })
        }
    }
</script>

News

<template>    
    <div id="news">   
       我是新闻组件
        <br>
       <button @click="emitHome()">给Home组件广播数据</button>
        <br>
    </div>
</template>
<script>
	//引入 vue实例
    import VueEvent from '../model/VueEvent.js';
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'              
            }
        },
        methods:{
            emitHome(){ 
                //广播
                VueEvent.$emit('to-home',this.msg)
            }
        },
        mounted(){
            VueEvent.$on('to-news',function(data){
                console.log(data);
            })
        }
    }
</script>

注：教学内容出自视频教学IT营itying.com 大地老师Vue基础教程

注：Vue中$emit传递一个或多个参数参考emit传递一个或多个参数