zoukankan      html  css  js  c++  java
  • vuejs非父子组件传值

    当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,vuejs提供了一中模式叫发布订阅模式(观察者模式,bus,总线)来处理非父子组件间的传值
    <div id='root'>
      <child content = 'Dell'></child>
      <child content = 'Lee'></child>
    </div>
    
    
    <script>
    Vue.prototype.bus = new Vue();
    
    Vue.component('child',{
      props:{
        content:String
      },
      data:function(){
        return {
          selfContent:this.content
        }
      },
      template:'<div @click="handleClick">{{this.selfContent}}</div>',
      methods:{
        handleClick:function(){
          this.bus.$emit('change',this.selfContent)
        }
      },
      mounted:function(){////页面已经被渲染完毕了的时候被执行
        var that = this;
        this.bus.$on('change',function(msg){
          that.selfContent = msg;
        })
      }
    })
    var vm = new Vue({
      el:'#root',
      methods:{
        handleClick:function(){
          alert(1);
        }
      }
    })
    </script>
  • 相关阅读:
    自动封箱和拆箱
    关于Java的一道内存的题目
    volatile关键字
    阶乘尾零
    Java之final的解析
    从1到n整数中1出现的次数
    最小安装雷达数量
    二叉树重建
    最短路径—Dijkstra算法
    PAT A1063——set的常见用法详解
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9660225.html
Copyright © 2011-2022 走看看