非父子组件传值(Bus/总线/发布订阅者模式/观察者模式)

最新推荐文章于 2023-12-22 17:02:50 发布

原创最新推荐文章于 2023-12-22 17:02:50 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

Vue

20 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单示例，展示了如何通过全局事件总线(bus)来实现不同Vue组件间的通信。具体包括了如何定义组件、传递参数、触发事件以及响应事件等关键步骤。

<body>
   <div id="root">
       <child content="Dell"></child>
       <child content="Lee"></child>
   </div>
   <script>
       Vue.prototype.bus = new Vue();//挂载一个bus属性

       Vue.component('child',{
           data: function(){
               return {
                   selfContent: this.content
               }
           },
           props: {
               content: String
           },
           template: "<div @click='handleClick'>{{selfContent}}</div>",
           methods: {
               handleClick: function(){
                   this.bus.$emit('change', this.selfContent)
               }
           },
           mounted: function() {
               var this_ = this;//这里this的作用域改变了
               this.bus.$on('change', function(msg) {
                   this_.selfContent = msg
               })