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文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
随机推荐
- bootstrap.yml
spring: jpa: properties: hibernate.enable_lazy_load_no_trans: true application: name: paycore cloud: ...
- python 在图像上写中文字体 (python write Chinese in image)
本人处理图像的时候经常使用opencv的包,但是 cv2.putText 显示不了中文,所以查找了如何在python在图像上写中文的方法,在伟大的Stack Overflow上面找到一个方法,分享给大 ...
- js浮点解决
function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) ...
- PHP chgrp() 函数
定义和用法 chgrp() 函数改变指定文件的用户组. 如果成功则返回 TRUE,如果失败则返回 FALSE. 语法 chgrp(file,group) 参数 描述 file 必需.规定要检查的文件. ...
- UNP学习第九章 基本名字与地址转换
之前都用数值地址来表示主机(206.6.226.33),用数值端口号来标识服务器. 然而,我们应该使用名字而不是数值:名字比较容易记,数值地址可以改变但名字保持不变. 随着往IPv6上转移,数值地址变 ...
- JavaScript 的 API设计原则
一.接口的流畅性 好的接口是流畅易懂的,他主要体现如下几个方面: 1.简单 操作某个元素的css属性,下面是原生的方法: document.querySelectorAll('#id').style. ...
- Windows最值得安装的小众软件
用电脑这么久,也琢磨出自己的一些使用心得.今天和大家分享几个Windows效率工具.数量不多,但每个都是精品. ▌软件下载-卫星公众好「悦享软件」,在后台会话框中回复关键字:h108 1.Ditto ...
- The Second Scrum Meeting!
第七周会议 情况简述 会议概要:汇报已完成的任务,讨论并解决遇到的问题 参与人员:詹晓宇 谢赛金 熊紫仁 徐翠萍 周娟 孙尚煜 会议地点:六区研讨性教室 具体内容 小组成员 已完成任务 计划 ...
- iOS 技能图谱
# iOS 技能图谱## 编程语言 - Swift - Objective-C - C++/C - JavaScript ## 操作系统 - Mac OSX - iOS - watchOS - tvO ...
- selenium自动化之验证，判断总结（持续更新）
API命令 1,is_displayed() 例子:driver.find_element_by_css_selector("#id").is_displayed() 该元素是否可 ...