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

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 有两种方法: 1.数位DP算法 2.暴力打表——真是个好法子!!! 接下来是注意点: 1.一般这 ...

  2. Connection closing...Socket close. Connection closed by foreign host. Disconnected from remote host(centos6.9) at 14:59:05.

    查找网上资料解决方法如下 [root@localhost ssh]# service sshd start Starting sshd: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  3. Python 15 I/O编程

    读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...

  4. 关于i++与++i的学习讨论!

    先谈容易的知识点 区别两个 1. i++ 返回原来的值,++i 返回加1后的值. 2. i++ 不能作为左值,而++i 可以. 重点说下第二点.首先解释下什么是左值 左值是对应内存中有确定存储地址的对 ...

  5. mysql连接查看

    1:查看当前连接 mysql> show status like 'Threads%'; +-------------------+-------+ | Variable_name     | ...

  6. 如何修改FlashFXP默认编辑工具使用记事本打开

    FlashFXP如果不设置默认编辑工具,那么当你打开html文档的时候,默认会用word打开,很不方便,其实简单的设置下,可以默认以任何工具打开.具体设置方法如下: 选项>>关联文件. 然 ...

  7. 7.vs的基本设置

    1.运行代码的两种方式 (1) 按F5 (2)点击快速菜单栏上面的绿色三角形按钮. 2.生成解决方案 F6. 3.在代码上看见红色的波浪线,表示代码有语法错误. 4.一般我们在运行一个程序之前,我们先 ...

  8. hdu 3586 最小代价切断根与叶子联系

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3586 http://blog.csdn.net/woshi250hua/article/details ...

  9. 自定义HandlerMethodArgumentResolver参数解析器和源码分析

    在初学springmvc框架时,我就一直有一个疑问,为什么controller方法上竟然可以放这么多的参数,而且都能得到想要的对象,比如HttpServletRequest或HttpServletRe ...

  10. windows server2008 64 asp.net 使用office组件环境配置.

    服务器是windows server2008 64位系统, 我的系统需要用到Microsoft.Office.Interop.Excel组件 在上传Excel单据遇到错误:检索 COM 类工厂中 CL ...