Vue非父子组件传值

<template>


  <div id="app"> 
    

     <v-home></v-home>

    <br>
    <hr>
    <br>
    <v-news></v-news>
     

  </div>
</template>

<script>

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


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


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


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


    })

  
  */



   import Home from './components/Home.vue';

   import News from './components/News.vue';


   export default {     
      data () { 
        return {
         
         msg:'你好vue'
        }
      },
      components:{   /*前面的组件名称不能和html标签一样*/
        'v-home':Home,     
        'v-news':News
      }
     
    }
</script>


<style lang="scss">


</style>

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

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

model/VueEvent.js

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

来源：https://www.cnblogs.com/loaderman/p/11058209.html

标签

vue

news

data