当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,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>

vuejs非父子组件传值的更多相关文章

  1. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  2. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  3. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

  4. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  5. 组件基础(非父子组件传值)—Vue学习笔记

    最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...

  6. React 父子组件和非父子组件传值

      零.this.props     可以接收到 外界的传值 和 此组件标签内部自定义的方法       例:         <one vals={message} sendVal={this ...

  7. Vue组件通信之非父子组件传值

    前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...

  8. Vue父子组件和非父子组件传值问题

    父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据,如果只是传常量,那么属性可以不用加':'(表示 ...

  9. Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

    参考链接:https://blog.csdn.net/lander_xiong/article/details/79018737

随机推荐

  1. python3 生成器笔记

    #生成器def MyDemo(M): for i in range(M): yield i**2for item in MyDemo(9): print(item) # #生成器import sysa ...

  2. vue 中的 ... (三个点的用法)

    这个是扩展运算符. 扩展语法.对数组和对象而言,就是将运算符后面的变量里东西每一项拆下来.这个东西可以在函数定义的地方使用,比如使用func(...args)将函数传入的参数都放到args数组里.

  3. my01_Mysql router 安装

    Mysql router 主要用途是读写分离,主主故障自动切换,负载均衡,连接池等.安装如下 下载地址:https://dev.mysql.com/downloads/router/ tar -zxv ...

  4. Thinkphp3.2邮件发送

    第一步:加入这两个文件 第二部:在common的function中添加代码 function think_send_mail($to, $name, $subject = '', $body = '' ...

  5. 利用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  6. python 16 进程和线程

    进程和线程 很多同学都听说过,现代操作系统比如Mac OS X,UNIX,Linux,Windows等,都是支持“多任务”的操作系统. 什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务. ...

  7. Zookeeper分布式集群部署

    ZooKeeper 是一个针对大型分布式系统的可靠协调系统:它提供的功能包括:配置维护.名字服务.分布式同步.组服务等: 它的目标就是封装好复杂易出错的关键服务,将简单易用的接口和性能高效.功能稳定的 ...

  8. HDU5366——The mook jong——dp

    The mook jong Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  9. ps_cc:制作sprite拼贴图片

    我们的目标是: 将   合并为一张图片   step1:制作动作,便于批处理和重复使用 首先随便新建空白文档(建议:90x300px) 录制动作,alt+F9   上图中,可以新建分组前端,再新建动作 ...

  10. canvas剪辑区域