当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,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. environment与@ConfigurationProperties的关系 加载过程分析

    environment是在printBanner之前就初始化好了, 更在context创建之前, 已经加载application-xxxx.properties, System.properties, ...

  2. Filter责任链模式

    Filter责任链的创建 org.apache.catalina.core.ApplicationFilterFactory#createFilterChain,  此方法是被org.apache.c ...

  3. SSL证书切换

    SSL证书:SSL证书是数字证书的一种,类似于驾驶证.护照和营业执照的电子副本.因为配置在服务器上,也称为SSL服务器证书.SSL 证书就是遵守 SSL协议,由受信任的数字证书颁发机构CA,在验证服务 ...

  4. 【ACM】小猴子下落

    小猴子下落 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 有一颗二叉树,最大深度为D,且所有叶子的深度都相同.所有结点从左到右从上到下的编号为1,2,3,····· ...

  5. var在IE中的问题

    一个朋友问了一个js问题, 一段看不出有任何问题的代码, 在ie下报错:”object doesn’t support this property or method”. function foo(o ...

  6. 电感的Q值

    电感的Q值又称为品质因数,即在通过一定频率信号时,感抗与等效损耗之比.品质因数越高即系统损耗越小效率越高,一般为50`100,最高500左右,再大就会烧毁.一般Q值与很多因素有关:绕线粗细,长度与直径 ...

  7. visual stdio使用

    现在转换使用visual stdio,因为很多和以前的快捷键不同,也不打算换了,这样可移动性应该更好吧. 1.注释代码, 首先按下ctrl + k,然后再按下ctrl + c 2.取消注释,首先按下c ...

  8. auto uninstaller 简体中文版 更新下载地址

    地址一(腾讯微云) 地址二(百度网盘)    提取码:3nx7 地址三(直接下载)

  9. Java基础02-变量

    1.为什么要使用变量? 变量就是用来记忆数据的,它是一个记忆系统 2.什么是变量? 变量就是一个容器,用来装数据的,变量是放在内存里的. 比如:内存是酒店,变量名就是房间名,变量值就是住进房间的人 3 ...

  10. 祝高二学弟学妹AK NOIp2018!!!!!!