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文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
随机推荐
- 2019牛客多校第一场E ABBA 贪心 + DP
题意:问有多少个有(n + m)个A和(n + m)个B的字符串可以凑出n个AB和m个BA. 思路:首先贪心的发现,如果从前往后扫,遇到了一个A,优先把它看成AB的A,B同理.这个贪心策略用邻项交换很 ...
- Python 第三天学习整理2
一.常用的字符串方法 capitalize() #将字符串首字母大写 center(100,'*') #把字符串居中的 count(‘zhou’)#查询次数 endswith('.jpg ')#判断字 ...
- js实用小函数收集
格式化金额 var val='212312.235423' var rex = /\d{1,3}(?=(\d{3})+$)/g; val.replace(/^(-?)(\d+)((\.\d+)?) ...
- docker-ce 搭建的 lamp 开发环境笔记
工作目录: /home/{username}/dockers/lamp 将docker容器的apache的80 映射为本地主机的81 # sudo docker pull mattrayner/lam ...
- 本地MongoDB服务开启与连接本地以及远程服务器MongoDB服务
转载:https://blog.csdn.net/sunshinegyan/article/details/80017012 前提:本地已经安装好了MongoDB服务 1启动MongoDB: 方法1: ...
- 解决PageHelper.startPage(page, size)后，关于PageInfo的total等属性不正确等问题
在解决PageHelper.startPage(page, size);的位置问题后,又遇到total等信息错误,主要还是不细心,两个不同的List实例化进PageInfo,不能混在一起,同时要确保这 ...
- Mybatis基于XML配置SQL映射器(二)
Mybatis之XML注解 之前已经讲到通过 mybatis-generator 生成mapper映射接口和相关的映射配置文件: 下面我们将详细的讲解具体内容 首先我们新建映射接口文档 sysUse ...
- PHP chroot() 函数
改变根目录: <?php// Change root directorychroot("/path/to/chroot/"); // Get current director ...
- 洛谷 P2441 角色属性树
题目描述 绪萌同人社是一个有趣的组织,该组织结构是一个树形结构.有一个社长,直接下属一些副社长.每个副社长又直接下属一些部长……. 每个成员都有一个萌点的属性,萌点属性是由一些质数的萌元素乘积构成(例 ...
- SCP-bzoj-1085
项目编号:bzoj-1085 项目等级:Safe 项目描述: 戳这里 特殊收容措施: A*(上下界剪枝). 答案上界:15. 答案下界:当前步数+当前状态剩余步数估价. 这里我们简单地设计估价函数为当 ...