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 ...
随机推荐
- 分岔 Bifurcations
1. saddle-node bifurcation 2. transcritical bifurcation 3.pitchfork bifurcation 4. Hopf bifurcation ...
- 【学习】022 ActiveMQ
一.消息中间件概述 1.1消息中间件产生的背景 在客户端与服务器进行通讯时.客户端调用后,必须等待服务对象完成处理返回结果才能继续执行. 客户与服务器对象的生命周期紧密耦合,客户进程和服务对象进程都 ...
- vue 之 双向绑定原理
一.实现双向绑定 详细版: 前端MVVM实现双向数据绑定的做法大致有如下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的 ...
- git上拉项目
- java web中乱码的种类和一些解决方式
在java web课堂测试中遇到了一些乱码问题 ,从百度上找到了许多种解决方法和乱码的种类,在这里总结一下. 一.文件出现乱码 [右击文件]->[Properties]->[Resourc ...
- 170906-MyBatis续
===============================================Dynamic SQL========================================== ...
- GPG(pgp)加解密中文完整教程
一.介绍 我们都知道,互联网是不安全的,但其上所使用的大部分应用,如Web.Email等一般都只提供明文传输方式(用https.smtps等例外).所以,当我们需要传输重要文件时,应该对当中的信息加密 ...
- Linux shell - 修改文件所属用户和组 (chown, chgrp)
在工作中,会遇到这样的情况,需要把目录所属的的root用户更改到普通用户,root组更改到普通组. sha-q:/ # ll drwxr-xr-x 2 root root 4096 2014-09-1 ...
- fedora18 You might need to install dependency packages for libxcb.
22 down vote The page Qt for X11 Requirements lists some packages required to build Qt on Debian. Th ...
- zepto-touch.js插件
/* Zepto v1.2.0 - zepto event ajax form ie - zeptojs.com/license */(function(global, factory) { if ( ...