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文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
随机推荐
- nodejs包高效升级插件npm-check-updates
一.安装 npm install -g npm-check-updates 或 cnpm install -g npm-check-updates 二.使用 ncu crypto ^0.0.3 → ^ ...
- 巨好看的xshell配色
推荐字体Lucida console [FlatUI] text=e5e5e5 cyan(bold)=16a085 text(bold)=ecf0f1 magenta=9b59b6 green=2ec ...
- js判断元素是否可见
dom元素是否可见可使用jq的is方法和dom的offsetParent === null方法 jq中 $(element).is(":visible") === true !!( ...
- python的logging，将log保存到文件
import logging logging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s[line:%(line ...
- git小乌龟图标不显示 windows系统
1.修改注册表[windows + R 输入 regedit]进入注册信息,按照步骤找到 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curre ...
- 最新最全最详细的MacOS 10.14 Mojave黑苹果安装教程
图文教程知乎地址:点击打开链接 视频教程B站地址:点击打开链接 微信公众号 地 址:点击打开链接 准备工作(工具包及镜像在后边) 一个8G以上的U盘(有的U盘标的是8G,实际只有7.X,实际容量小于7 ...
- Panel
在Panel上绘图的实现 近期制作了FDS的一个建模工具,由于知识有限,做出的效果是2D的.昨天上课的时候看老师画一个长方体,突然想到,为什么不给普通的2D图形加画上几条直线,就能实现2D图形的3D视 ...
- 1.zabbix编译安装(环境lnmp)
zabbix服务端安装 1.使用脚本安装.脚本内容如下.安装完用http://192.168.159.20/zabbix #!/bin/bash #使用说明,此版本是针对程序安装路径不在/opt/下的 ...
- stc单片机笔记
volatile是一个类型修饰符(type specifier).volatile的作用是作为指令关键字,确保本条指令不会因编译器的优化而省略,且要求每次直接读值. 简单地说就是防止编译器对代码进行优 ...
- CenterOS 设置静态IP
本文主要介绍这样再CenterOS 中设定静态IP. 工具 centerOS 6.9 步骤 执行命令:vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑,填 ...