vue 非父子组件传值

/*非父子组件传值
1、新建一个js文件然后引入vue 实例化vue 最后暴露这个实例

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

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

4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on('名称',function(){

})

VueEvent.js

 import Vue from 'vue';

 var VueEvent = new Vue()

 export default VueEvent;

News.vue

 <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>

 <style lang="scss" scoped>

 </style>

Home.vue

 <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>

 <style lang="scss" scoped>

 </style>

巴特西

vue 非父子组件传值

最新文章

热门文章