zoukankan      html  css  js  c++  java
  • Vue通过EventBus实现兄弟组件间通信

    Vue中父子组件通信的方式是:父组件通过props向下传递数据给子组件,子组件通过$emit事件告诉父组件。对于没有引用关系的兄弟组件,若不需要Vuex,可以考虑通过EventBus(即事件总线)来实现通信。

    初始化

    有两种初始化方式,一种实例化一个新的Vue对象来创建,推荐放到一个单独的js文件中。

    var eventBus = new Vue()
    

    另外一种是直接在main.js中挂载到prototype上。

    Vue.prototype.$EventBus = new Vue()
    

    发送事件

    EventBus.$emit("msgName", msg)

    假设有两个兄弟组件,组件a和组件b。通过点击组件a向组件b传值。

    组件a:

    <!-- 组件A -->
    <template>
    <button @click="sendMsg()">按钮A, 向B传值</button>
    </tempalte>
    
    <script>
    	import {eventBus} from "./EventBus.js"
        export default {
            data(){
                return {
                    msg: "组件A的值"
                }
            }
            methods: {
                sendMsg(){
                    eventBus.$emit("fromA2B", this.msg)
                }
            }
        }
    </script>
    

    接收事件

    EventBus.on("msgName", function)

    <!-- 组件B -->
    <template>
    <button @click="reset()">{{msg}}</button>
    </tempalte>
    
    <script>
    	import {eventBus} from "./EventBus.js"
        export default {
            data(){
                return {
                    msg: "按钮B,准备接收A的值"
                }
            }
            watch:{
            	msg(newVal, oldVal){
                    console.log('B的值改变了')
                }
        	},
    		mounted(){
                eventBus.$on("fromA2B", e => {
                    this.msg = e
                })
            }
        }
    </script>
    

    事件移除

    在Vue页面销毁后,需要移除EventBus事件监听。

    import { eventBus } from './Event-bus.js'
    eventBus.$off('fromA2B', {})
    
  • 相关阅读:
    mysql自定义函数
    MYSQL常见运算符和函数
    PHP魔术方法和魔术变量总结
    魔术常量(Magic constants)
    常量和静态变量会先载入内存后在进行执行php代码
    php IP转换整形(ip2long)
    面试题1
    Java 通过 BufferReader 实现 文件 写入读取 示例
    UVA 2039 Pets(网络流)
    [置顶] Android框架攻击之Fragment注入
  • 原文地址:https://www.cnblogs.com/ingen42/p/13466854.html
Copyright © 2011-2022 走看看