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>
  • 相关阅读:
    微信 ios端config配置失败 android端正常
    vscode离线安装插件
    win7中vscode会黑屏或者终端空白,无法输入
    vue中使用svg图片
    a.download下载文件 ---跨域问题
    background 背景图片 --css3
    box-shadow
    兄弟伪类
    canvas画时钟
    轮播图--使用原生js的轮播图
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9660225.html
Copyright © 2011-2022 走看看