Vue 初级 非父子组件传值

/*非父子组件传值

  1、新建一个js文件   然后引入vue  实例化vue  最后暴露这个实例

  2、在要广播的地方引入刚才定义的实例

  3、通过 VueEmit.$emit('名称','数据')

  4、在接收收数据的地方通过 $om接收广播的数据

VueEmit.$on('名称',function(data){

console.log(data);

    })

  */

下面虽然可以做到非组件传值，但是复杂的话建议使用   vuex

 

 

主页面

<template>

    <div>

        <v-none1></v-none1>

        <br>

        <v-none2></v-none2>

    </div>

</template>

<script>

import None1 from './NoneParentChildComp'

import None2 from './NoneParentChildComp2'

export default {

    data(){

        return {

            

        }

    },

    components:{

        'v-none1':None1,

        'v-none2':None2

    }

}

</script>

<style scoped>

 

</style>

非子页面1

<template>

    <div>

        <h2>我是none1组件</h2>

        <el-button type="primary" @click="emitInfo">向none2组件发送消息</el-button>

    </div>

    

</template>

<script>

import VueEvent from '../../static/JS/VueEvent'//JS 引入好像不需要 components

export default {

    data(){

        return {

            msg:'父组件message'

        }

    },

    methods:{

        emitInfo:function(){

           VueEvent.$emit('to-none2',this.msg); 

        }

    }

}

</script>

<style scoped>

 

</style>

非子页面2

<template>

    <div>

        <h2>我是接收组件</h2>

    </div>

</template>

<script>

import VueEvent from '../../static/JS/VueEvent'//JS 引入好像不需要 components

export default {

    data(){

        return {

 

        }

    },

    mounted:function(){

        var info=VueEvent.$on("to-none2",function(data){

            console.log(data);

        });

    }

}

</script>

<style scoped>

 

</style>

JS

import Vue from 'vue'

 

var VueEvent =new Vue();

 

export default VueEvent;