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 ...
随机推荐
- vue-cli项目中引入全局scss
加载一个全局设置文件 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求.比如为所有组件全局使用 scss 变量.为了达成此目的: npm install sass-resour ...
- php-fpm参数优化
php-fpm参数优化 2013-11-18 Posted by yeho php-fpm进程设置多少合适,设成动态还是静态? <lnmp一键安装包>中会根据你服务器内存调整php-fpm ...
- ubuntu16.04 开启FTP服务
配置ftp 1.安装 vsftpd服务器 sudo apt install vsftpd 2.创建一个ftp文件夹 (可以跳过) sudo mkdir /home/ftp 3.新建ftp用户,并指向它 ...
- [洛谷P4823] TJOI2013 拯救小矮人
问题描述 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以碰到陷阱口. 对于每一个小矮人,我们知道他从 ...
- LeetCode--098--验证搜索二叉树（python）
给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当前节点的数.所有左子树和右子树自身必须也是二叉搜索树. ...
- SpringBoot路径映射
当然这个功能并非是springboot特有的,只是springboot提供了更简便的方法以供使用. 传统情况下我们跳转一个动态页面且并没有数据,也需要在controller中写一个跳转的con ...
- SQL Server2008收缩日志文件
查询状态语句: SELECT name,log_reuse_wait_desc FROM sys.databases where name='hrsystem'; 收缩日志文件: USE [maste ...
- 【JavaScript】 命名空间污染解决
闭包解决命名空间污染问题 var init = (function () { var name = "zhangsan", age = 12, sex = "male&q ...
- SpringCloud 教程 （二） 服务链路追踪(Spring Cloud Sleuth)
一.简介 Add sleuth to the classpath of a Spring Boot application (see below for Maven and Gradle exampl ...
- Sublime如何设置背景透明
Sublime如何设置背景透明 下载sublime 透明背景插件 我用的是git下载插件: git clone https://github.com/vhanla/SublimeTextTrans.g ...