Vue之非父子组件通信

非父子组件传值方法：

1：在model中新建一个js文件引入Vue 实例化Vue 最后暴露相关实例

// 引入vue
import Vue from 'vue'
// 创建一个空的vue实例
var bus=new Vue()
// 将实例暴露出去
export default bus

2：再要广播的位置和接收广播的位置引入刚刚创建的实例

import Bus from '../model/bus'

3:通过Bus.$emit('广播名称','数据');像兄弟组件广播数据


       emitNews(){
        //通过Bus.emit向news组件广播（‘名称’，‘数据’）    向news 组件广播数据
           Bus.$emit('to-news',this.msg)
       }

4：在接收数据的位置通过$on接收广播传来的数据


     mounted(){
        //  通过Bus.on来接收广播的数据
         Bus.$on('to-news',(data)=>{
             alert(data)

         })
}

实例：

<template>
    <div>
        <br>
        <h2>这是一个首页组件</h2>
        <button @click="emitNews()">向News组件广播数据</button>
        <hr>


    </div>
</template>
<script>
import Bus from '../model/bus'
export default {
    data(){
        return{
            msg:'Yes, a first Page!',
            title:'我是的数据NO.1'
        }
    },
    methods:{
       emitNews(){
        //通过Bus.emit向news组件广播（‘名称’，‘数据’）    向news 组件广播数据
           Bus.$emit('to-news',this.msg)
       }
    }
}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

<template>
    <div>
        <h1>这是新闻组件</h1>
       
    </div>
</template>
<script>
import Bus from '../model/bus'
export default {
    data(){
       return{
            aaa:'m,sh'
       }
    },
     methods:{

     },
     mounted(){
        //  通过Bus.on来接收广播的数据
         Bus.$on('to-news',(data)=>{
             alert(data)

         })
     }
  
}
</script>

<style lang="scss" scoped>
h1{
    color: skyblue;
}
</style>

OK，Vue之非父子组件传值就总结到这，欢迎各位同仁指点讨论！

Vue之非父子组件通信

Vue之非父子组件通信

猜你喜欢