vue 2.0 组件传值 (3)

描述

非父子组件传值

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

新建 jsx 文件VueEvent

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

父组件

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

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

<style lang="scss" scoped>
    /*css scoped 设置 局部作用域  */
    h2{
        color:red
    } 
</style>

子组件Header

<template>
    <div>
        <h2>我是头部组件--{{msg}}</h2>
        <button @click="emitHome()">给Home组件广播数据</button>
    </div>
</template>

<script>    
export default {
    data() {
        return {
            msg: '子组件的msg'
        }
    },
    methods: {
            emitHome() { 
                //广播
                VueEvent.$emit('to-home', this.msg)
            },
            mounted() {
                VueEvent.$on('to-news',function(data){
                    console.log(data);
            })
        }
    }
}
</script>