当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,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. (转)Mat, vector<point2f>,Iplimage等等常见类型转换

    在mfc c++ 以及opencv 编写程序当中,很多常用的类型转换,现在总结一下.(注意加相应的头文件,这里不罗嗦) 提纲: 1. Mat ---> Iplimage 2. Iplimage  ...

  2. STL之 sort排序与检索(2019.1.18)

    1.作用对象:数组  a[n] 头文件:#include<algorithm> 内容:sort(a,a+n) 功能:进行升序排序 内容:lower_bound(a,a+n,x) 功能:找到 ...

  3. my17_Mysql 主从切换

    注意事项: 从库提升为主库read_only要设置为OFF原主库改为从库后,read_only要设置ONread_only=ON并不能对root生效,确保root不会进行数据写入从主库进行 flush ...

  4. php连接数据库mysql数据库

    查找数据 $con = mysqli_connect('localhost', 'root', '', 'mydb'); if (!$con) { die('数据库连接失败' . mysqli_con ...

  5. spark常用算子总结

    算子分为value-transform, key-value-transform, action三种.f是输入给算子的函数,比如lambda x: x**2 常用算子: keys: 取pair rdd ...

  6. (转)轻松掌握shell编程中数组的常见用法及示例

    缘起:在老男孩进行linux培训shell编程教学中,发现不少水平不错的网友及同学对数组仍然很迷糊,下面就给大家分享下数组的用法小例子,希望能给大家一点帮助.其实SHELL的数组很简单,好用.我们学习 ...

  7. PHP函数库(概览)

    数组函数: array_change_key_case — 返回字符串键名全为小写或大写的数组 array_chunk — 将一个数组分割成多个 array_column — 返回数组中指定的一列 a ...

  8. Windows窗体应用开发3--配置标准控件1

    1.掌握主要的Windows窗体控件的功能 2.掌握使用SplitContainer控件的方法 3.掌握使用TreeView控件的方法 注:新建一个WindowsForm 命名为Form2.cs 主要 ...

  9. 浅谈SQL Server中的三种物理连接操作(Nested Loop Join、Merge Join、Hash Join)

    简介 在SQL Server中,我们所常见的表与表之间的Inner Join,Outer Join都会被执行引擎根据所选的列,数据上是否有索引,所选数据的选择性转化为Loop Join,Merge J ...

  10. Swift-数组

    1.数组的定义  //OC 使用[]定义数组,Swift一样,但是没有@ //自动推导的结果[String]->表示数组中存的都是String //跟OC中的数组指定泛型类型  //Swift ...