vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子组件之间的传值</title> </head>
<body>
<div id="app">
<child content="Dell"></child>
<child content="Lee"></child>
</div> <!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.prototype.bus = new Vue();
Vue.component('child', {
data: function() {
return {
selfContent: this.content
}
},
props: {
content: String
},
template: `<div @click="handleClick">{{selfContent}}</div>`,
methods: {
handleClick: function() {
this.bus.$emit('change', this.selfContent);
}
},
mounted: function() {
var _this = this;
this.bus.$on('change', function(msg) {
_this.selfContent = msg;
})
} })
var app = new Vue({
el: '#app'
}) </script>
</body>
</html>
vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）的更多相关文章
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
- Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue非父子关系之间通信传值
第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- vue非父子组件之间的通信
https://www.cnblogs.com/chengduxiaoc/p/7099552.html //vm.$emit( event, arg ) //触发当前实例上的事件 //vm.$on ...
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
随机推荐
- PCA revisit
都知道PCA可以做降维,那它为什么可以降维,究竟是怎么降维的呢? 1. 为什么我们要降维? 我们的样本数据好好的,为什么要去做降维,第一个要想清楚这个问题. 也许你是要训练一个分类器,觉得当前特征维度 ...
- 一次CTS引发的网络故障
接到业务部门通知,A机房(库a)到B机房(库b)之间的数据库服务器之间的网络带宽异常突增,影响公司对外业务的整体带宽.一接到通知,作为数据库管理对所涉及的IP还是比较敏感.第一反应就是可能当时主库产生 ...
- centos 6.5 安装 zookeeper
从zookeeper官方网站下载安装包:zookeeper-3.4.9.tar.gz,解压安装 tar xvf zookeeper-3.4.9.tar.gz -C /usr/java cd /usr/ ...
- gene network analysis
基因表达分析包括3个层次[68], 首先是单基因水平, 即比较对照组与实验组的每个基因是否存在表达差异, 这主要指差异基因表达分析; 其次是多基因水平, 如按照基因的共同功能.相互作用.共同表达等 ...
- flume源码
IDEA查看源码 IDEA快捷键 1 查看接口的实现类:Ctrl+Alt+B 选中按快捷键,然后跳到实现类的地方去 2 切换页面:Alt+<- 和 Alt+-> Alt+-> 3 查 ...
- Android中的ImageView的scaleType属性详解
ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分,等等. 设置的方式包括: 1. 在layout xml中定义android:s ...
- Python基础教程（010）--第一个程序Hello Python
前言 会编写Hello Python源程序 内容 1,在桌面下,新建Python目录 2,在认识的Python目录下,新建一个HelloPython的文件 linux下: touch HellPyth ...
- kubernetes批量删除pod
监控页面出现看到有运行失败的pod 1) 查看有哪些不运行的podcustom-metrics-apiserver日志占满空间被驱逐 [root@hadoop03 ~]# kubectl get po ...
- 国际C 语言乱码大赛（IOCCC ）
你也许听说过“国际C 语言乱码大赛(IOCCC )”,能获奖的人毫无疑问是世界顶级C 程序员.这是他们利用C 语言的特点极限挖掘的结果.下面这个例子就是网上广为流传的 一个经典作品:// 原始代码如下 ...
- 63、saleforce DML
PRIVELEGE__c privilege = new PRIVELEGE__c(PRIVILAGENAME__c = '权限添加',PRIVILAGEDESCRIBE__c = '权限描述'); ...