关于前端:vue-20-组件传值-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>