Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root">
<child content="Nay"></child>
<child content="Ek"></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() {
return {
selfContent : this.content
}
},
props: {
content: String
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods: {
handleClick() {
this.bus.$emit('change', this.selfContent)
}
},
mounted() {
// var that = this
// this.bus.$on('change', function(msg) {
// 这里this的指向发生了变更所以需要提前保存this，或者用箭头函数解决
// that.content = msg
// })
this.bus.$on('change', (msg) => {
this.selfContent = msg
})
}
})
var vm = new Vue({
el: '#root'
})
</script>
</body>
</html>
Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)的更多相关文章
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- vue中兄弟组件间 的传值 bus(可以理解为公共交通)
点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化 1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue中非父子组件的传值bus的使用
非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...
- 20、解决Vue使用bus兄弟组件间传值，第一次监听不到数据
1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...
- 关于Vue中父子组件相互传值
Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...
- Vue之组件间传值
标签: Vue Vue之父子组件传值 父向子传递通过props 子向父传递通过$emit 演示地址 代码示例如下: <!DOCTYPE html> <html lang=" ...
- 浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
- vue中兄弟之间组件通信
我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...
随机推荐
- C#实现整型数据字任意编码任意进制的转换和逆转换
实现如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespa ...
- centos 更换用户密码
腾讯云报告了我的服务器被暴力破解了.... 因此需要更换更复杂的password, 命令为:passwd 用户名,例如下我要更换root的password [root@VM_0_4_centos ~ ...
- Nginx 代理本地文件夹（Windows环境）
安装环境: win10 nginx-1.17.2 步骤: 一.打开nginx.conf 路径:\nginx-1.17.2\conf\nginx.conf 二.编辑 配置跨域以及代理文件夹路径 三.启动 ...
- PostGIS 安装教程（Linux）（一）
##本文分两部分,第一部分讲linux下postgresql的安装,第二部分讲postgis的安装 ##感谢作者:https://www.linuxidc.com/Linux/2017-10/1475 ...
- 词袋模型（BOW，bag of words）和词向量模型（Word Embedding）概念介绍
例句: Jane wants to go to Shenzhen. Bob wants to go to Shanghai. 一.词袋模型 将所有词语装进一个袋子里,不考虑其词法和语序的问题,即每个 ...
- SVN常用命令详解
命令的使用1.检出 svn co http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn co svn://路径(目录或文件的全路 ...
- .net core 上传文件Demo
view: <form method="post" enctype="multipart/form-data" action="@Url.Act ...
- Maven安装目录分析
maven目录结构介绍 bin: 包含了mvn运行的脚本(既在cmd输入命令执行依赖,在命令行输入任何一条mvn命令时,实际上就是在调用这些脚本) boot: 该目录只包含一个文件,是一个类加载器,m ...
- python加载csv数据
入门机器学习时,一些测试数据是网络上的csv文件.这里总结了两种加载csv文件的方式: 1 通过numpy.urllib2加载 import numpy as np import urllib2 ur ...
- 上手spring boot项目(四)之springboot如何返回json数据
在springboot整合thymeleaf中,经常会在HTML页面中接收来自服务器的json数据,然后处理json数据并在页面上渲染.那么如何在服务器中返回json类型的数据呢? 1.使用@Resp ...