对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线)

<body>

  <div class="app">

    <child content = "dell"></child> //这两个子组件之间可以互相传值

    <child content = "lee"></child>

  </div>

</body>

<script>
//每一个vue实例对象上都能访问到同一个vue实例

  Vue.prototype.bus = new Vue()

  Vue.component("child",{

    template:' <div @click="handleClick">{{selfContent}}</div>',

    data:function(){

      return{

        selfContent:this.content

      }

    },

    props:{

      content:{

        type:String

      }

    },

    methods:{

      handleClick:function(){

        console.log(this.selfContent)
//单击的时候 在第三方Vue实例上触发change事件并且将this.selfContent传递过去

        this.bus.$emit('change',this.selfContent)

      }

    },

    mounted:function(){

        let this_ = this
//在页面元素渲染完成后 为第三方Vue实例 -- this.__proto__.bus 注册监听change事件

        this.bus.$on('change',function(msg){

          alert(0)

          this_.selfContent = msg

        })

      }

  })

  const app = new Vue({

    el:'.app'

  })

vue bus方式解决非父子组件间的传值的更多相关文章

  1. Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  3. vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  5. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  6. vue非父子组件间通信

    有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...

  7. 非父子组件通过事件传值-vue

    1.创建中央事件总线:额外的 new Vue()2.$emit 触发事件3.$on 监听事件 在使用组件的文件中: <template> <div> <x-test :b ...

  8. Angular 非父子组件间的service数据通信

    完成思路:以service.ts(主题subject---订阅sbuscribe模式)为数据中转中间件,通过sku.ts的数据更改监测机制,同步更改service.ts中的数据,同时buy.ts组件实 ...

  9. Vue非父子组件之间的传值

    1.新建一个js文件  然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...

随机推荐

  1. Python3 中日语料分句实现

    0. 背景 因为最近在看平行语料句对齐.词对齐的缘故,想做对齐的话需要先做一个分句. 一开始利用正则和引号开关标志写了一种方法,中间想到一个小技巧,写出来比较简单通用,想把这一小段代码分享一下. 1. ...

  2. maven(15)，快照与发布，RELEASE与SNAPSHOT

     发布RELEASE 用户A将代码打包发布到RELEASE仓库,具体操作参考上篇文章.用户B使用时,需要在pom.xml添加JAR包的依赖坐标.如果用户A将版本从1.0升级为2.0,用户B使用时也 ...

  3. Centos 7配置docker-阿里云镜像加速

    阿里云加速网址:https://cr.console.aliyun.com/cn-hangzhou/mirrors(自行注册账密码) sudo mkdir -p /etc/docker sudo vi ...

  4. SQL Server Management Studio 2012 键盘快捷键(转)

    无论是对于DBA还是Developer,键盘快捷键都是很常用的,动动键盘可比鼠标快多了,不过SQL Server 2012对SSMS(SQL Server Management Studio)中的快捷 ...

  5. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...

  6. centos6.3_gcc安装软件及流程

    分享链接下载文件上传安装即可 链接:https://pan.baidu.com/s/15eUhm9LTUdHDPkXOyRb9Tg 密码:tohr # 文件内置安装脚本,直接安装即可 [root@lo ...

  7. August 18th 2017 Week 33rd Friday

    If you shed tears when you miss the sun, you also miss the stars. 如果你因为错过太阳而哭泣,你也将会错过繁星. If you have ...

  8. 理解单链表的反转(java实现)

    要求很简单,输入一个链表,反转链表后,输出新链表的表头.   反转链表是有2种方法(递归法,遍历法)实现的,面试官最爱考察的算法无非是斐波那契数列和单链表反转,递归方法实现链表反转比较优雅,但是对于不 ...

  9. API接口数据自检

    这个周末的娱乐,通用模块,让后端自检,严格客户端按照文档的要求来,妈妈再也不担心我加班了,对某些团队来说,可能根本用不着,本是想到就尝试一把而已. 哎,傻X的客户端程序员,时间都去推辞扯淡打扮啦,好好 ...

  10. How Flask Routing Works

    @How Flask Routing Works The entire idea of Flask (and the underlying Werkzeug library) is to map UR ...