关于前端: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>