对于非父子组件之间的传值 通常使用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. jQuery的安装

    一.jQuery的安装 下载 jQuery 有两个版本的 jQuery 可供下载: Production version - 用于实际的网站中,已被精简和压缩. Development version ...

  2. 从零开始——JSON ARRAY&JSON OBJECT

    在学习“基于角色的权限”的例子中,遇到了json object和json array,因此在一番学习之后对此要点进行粗略整理. 参考: https://my.oschina.net/u/2601842 ...

  3. CAGradientLayer渐变颜色动画

    CAGradientLayer渐变颜色动画 或许你用过CAGradientLayer,你知道他是用于渐变颜色的,但你是否直到,CAGradientLayer的渐变颜色是可以动画的哦. 源码: // / ...

  4. Redis 在Golang中使用遇到的坑

    1.从lua脚本传回到go那边的数字是string类型 2.hincrby 返回当前值的计算结果(即存放到redis中的值) 3.hset 一个不存在的key,返回什么呢?即设置失败返回什么错误?(会 ...

  5. java入门学习总结

    1.jdk(java开发工具包)------> jre(java运行环境)------> jvm(java虚拟机) ------>应用(javac) -------> java ...

  6. windows下sqli-labs的搭建及学习(GET篇)

    环境搭建: 源码下载地址:https://github.com/Audi-1/sqli-labs 需要搭建以下环境: apache+mysql+php Tomcat+mysql+java(部分关卡需要 ...

  7. [DP]洛谷P1115最大子段和

    题目来源 https://www.luogu.org/problemnew/show/P1115 题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一行是一 ...

  8. 35、XpathNavigator Xpath导航器 System.Xml.XPath;

    XPathNavigator类包含移动和选择XML所需元素的所有方法. 一.创建: a.如果是从XPathDocument中创建,则是只读的,只能浏览数据:  b.如果是从XmlDocument中创建 ...

  9. css计数器 及 鼠标经过从中间扩散一个矩形(正方形长方形均可)

    <!DOCTYPE html> <html> <head> <title>css计数器--兼容IE8</title> <meta ch ...

  10. OS开发小记:iOS富文本框架DTCoreText在UITableView上的使用

    要在页面中显示自己的布局,比如文字的字体和颜色.图文并排的样式,我们要用iOS SDK的原生UI在app本地搭建,如果一个页面需要在服务器端获取数据的话,我们也要在本地搭建好固定的布局,解析服务器传回 ...