zoukankan      html  css  js  c++  java
  • Vue-发布订阅机制(bus)实现非父子组件的传值

     

    1.把Vue.prototype上挂载一个bus属性,这个属性指向1个vue实例,
    以后创建组件的时候,每个组件上都会有bus这个属性,都指向同一个实例

    Vue.prototype.bus = new Vue();

    2.发布
    在methods里使用 this.bus.$emit 发布广播

    methods:{
        broadcast: function() { 
        this.bus.$emit('change', this.selfContent);//发布change事件并且携带参数
    }

    3.订阅
    在mounted里使用this.bus.$on 订阅事件

    mounted: function () { 
        var _this = this;
        this.bus.$on('change', function (msg) { //订阅change事件
            _this.selfContent = msg;
        }
    )    

     全部代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <child :content="'全部变成第1项内容'"></child>
        <child :content="'全部变成第2项内容'"></child>
      </div>
    </body>
    <script type="text/javascript" src="./vue.js"></script>
    <script
    <!-- 把Vue.prototype上挂载一个bus属性,这个属性指向1个vue实例,
    以后创建组件的时候,每个组件上都会有bus这个属性,都指向同一个实例 -->
    Vue.prototype.bus=new Vue();
    Vue.component('child',{
      props:['content'],
      template:"<div @click='handleClick'>{{selfContent}}</div>",
      data:function(){
        return {
          selfContent:this.content
        }
      },
      methods:{
        handleClick:function(){
          //本组件向外触发change,并携带值
          this.bus.$emit('change',this.content);
        }
      },
      mounted:function(){
        var this_=this
        //其它组件监听change,并取得值
        //两个child的组件都对change进行了监听
        this.bus.$on('change',function(msg){
          console.log('change');
          this_.selfContent=msg;
        })
      }
    })
    var app=new Vue({
        el:'#app',
    })
    </script>
    </html>
  • 相关阅读:
    Java中Comparable与Comparator的区别
    LeetCode[5] 最长的回文子串
    LeetCode[3] Longest Substring Without Repeating Characters
    LeetCode 7. Reverse Integer
    统计单词出现的次数
    System.arraycopy()和Arrays.copyOf()的区别
    SyncToy
    查看端口占用及进程号
    TCP协议
    python 的日志logging模块学习
  • 原文地址:https://www.cnblogs.com/superlizhao/p/9629663.html
Copyright © 2011-2022 走看看