vue中的Bus/总线/发布订阅/观察者模式

最新推荐文章于 2024-05-29 14:40:07 发布

gjtmadjgp

最新推荐文章于 2024-05-29 14:40:07 发布

阅读量281

点赞数

本文链接：https://blog.csdn.net/qiguoqi777/article/details/105716622

版权

本文深入探讨了Vue.js中的事件总线（Bus）概念，它是实现组件间通信的一种方式，基于发布订阅模式。通过创建一个全局实例，我们可以让不直接相关的组件通过发送和监听自定义事件进行通信，从而提高应用的灵活性。

摘要由CSDN通过智能技术生成

Vue.prototype.bus = new Vue();

    Vue.component("child",{
      template: '<div @click="handleClick">{{selfContent}}</div>',
      props: {
        content: String
      },
      data() {
        return {
          selfContent: this.content
        }
      },
      methods: {
        handleClick() {
          this.bus.$emit("change", this.selfContent);
        }
      },
      mounted() {
        this_ = this;
        console.log(this);
        this.bus.$on("change", function(value) {
          console.log("value:",value);
        });
      }
    });
    var app = new Vue({
      el: '#app',
      mounted() {
        this.bus.$on("change", function(value){
          console.log(value);
        })
      }
    });