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 ...
随机推荐
- 北京师范大学第十五届ACM决赛-重现赛 B Borrow Classroom （树 ——LCA ）
链接:https://ac.nowcoder.com/acm/contest/3/B 来源:牛客网 Borrow Classroom 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 2 ...
- 磁盘,fdisk分区,MBR,dd命令
光盘和磁盘.u盘.软盘.硬盘有什么区别 ①光盘: cdrom/dvdrom:光驱(光盘驱动器) rom:只读 ram:可以擦写 cd:700M dvd:4G ②软盘:flopp ...
- Django【第26篇】：中介模型以及优化查询以及CBV模式
中介模型以及优化查询以及CBV模式 一.中介模型:多对多添加的时候用到中介模型 自己创建的第三张表就属于是中介模型 class Article(models.Model): ''' 文章表 ''' t ...
- Django【第22篇】：基于Ajax实现的登录
基于ajax实现的登录 一.需要知道的新知识点 1.刷新验证码.给src属性加一个?号.加个?会重新去请求 //#给验证码刷新 $(".vialdCode_img").click( ...
- wepy-开发总结(功能点)
开发小程序中,遇到的wepy的几点坑,记录一下; 更详细的项目总结记录请见我的个人博客:https://fanghongliang.github.io/ 1.定时器: 在页面中有需要用到倒计时或者其他 ...
- 8.docker的系统资源限制
一. 概述 默认docker容器使用的memory资源和CPU资源是没有限制的,但是我们可以在docker run的时候通过选项去限制,具体参考官方文档. [root@node1 ~]# docker ...
- python连接数据库自动发邮件
python连接数据库实现自动发邮件 1.运行环境 redhat6 + python3.6 + crontab + Oracle客户端 2.用到的模块 3.操作步骤 (1)安装python3.6参考 ...
- kafka完全分布式搭建（2.12版）
1.下载解压 tar -xvf kafka_2.12-1.0.0.tgz 2.进入config目录下,修改server.propeties文件 broker.id=0 #当前server编号 port ...
- Linux学习-NFS服务
一.NFS服务相关介绍 1.NFS简介 NFS (Network File System) 网络文件系统,基于内核的文件系统.Sun公司开发,通过使用NFS,用户和程序可以像访问本地文件一样访问远端系 ...
- iOS---如何获取手机的本地照片和相册
__weak ViewController *weakSelf = self; dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIO ...