Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<zyx content='zyx'></zyx>
<zyx content='zy'></zyx>
</div>
</body>
<script>
/*
把Vue实例赋值给 Vue.prototype 的 bus 属性上 ，以后每次调用Vue或者创建组件的时候，都会有bus这个属性。
因为new的实例或者组件都是通过Vue这个类创建的。
在Vue的prototype上挂载了bus属性
*/
Vue.prototype.bus = new Vue(); Vue.component('zyx',{
data:function(){
return {
selfContent : this.content //因为子组件的props里的值不能修改父组件，所以先把值赋值给另一个变量
}
},
props:{
content:String //content必须是个string类型
},
template:'<div @click="clickHander()">{{selfContent}}</div>',
methods: {
clickHander(){
//向bus上触发一个change事件，并把参数传递过去
this.bus.$emit('change',this.selfContent)
}
},
//监听生命周期函数
// created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
// mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
mounted:function(){
//监听change事件
var _this = this;
this.bus.$on('change',function(msg){
_this.selfContent = msg;
})
},
}) let vm = new Vue({
el:'#app',
}); </script>
</html>
Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）的更多相关文章
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- vue中兄弟组件间 的传值 bus(可以理解为公共交通)
点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化 1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...
- 【vue】父子组件间通信----传值
官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav :data1=" " ></nav> ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
随机推荐
- IsNumeric 函数
VB IsNumeric 判断数字函数功能详解: IsNumeric 函数 函数功能: 返回 Boolean 值,指出表达式的运算结果是否为数. 函数语法: IsNumeric (ex ...
- 03python面向对象编程3
案例学习 # notebook.pyimport datetime # Store the next available id for all new notes last_id = 0 class ...
- Linux之文件属性、权限
Linux中的3种身份:1. owner(文件所有者) 2. group(用户组) 3. others(其他) Linux中的3中权限:1. r(可读) 2. w(可写) 3. x(可执行) * 所有 ...
- Andronov-Hopf bifurcation
地址:http://www.scholarpedia.org/article/Andronov-Hopf_bifurcation Andronov-Hopf bifurcation is the bi ...
- Codeforces 948 数论推导 融雪前缀和二分check 01字典树带删除
A. 全部空的放狗 B. 先O(NLOGNLOGN)处理出一个合数质因数中最大的质数是多少 因为p1 x1 x2的关系是 x2是p在x1之上的最小倍数 所以x1的范围是[x2-p+1,x2-1]要使最 ...
- vector存放结构体数据的2种方法
如果要在Vector容器中存放结构体类型的变量,经常见到两种存放方式. 方式一:放入这个结构体类型变量的副本. 方式二:放入指向这个结构体类型变量的指针. 假设结构体类型变量是这样的, typedef ...
- Android相关资源
各类黑客大会资料 https://infocon.org/cons/ 各类课程.视频 https://github.com/Developer-Y/cs-video-courses#security ...
- Jdbc连接数据库基本步骤详解_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 Jdbc连接数据库的基本步骤,供大家参考,具体内容如下 package demo.jdbc; import java.s ...
- 【ZJOI2008】树的统计
题目 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u v: ...
- Node.js 版本管理工具——nvm
日常项目开发中,有些项目可能基于node V10 或者 V8 不同的版本: 如果我们手动安装卸载node,这样是不友好. 先放上作者的博客地址 : https://www.cnblogs.com/g ...