Vue 组件通信（组件间通信）
1、中央事件总线bus
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<p>{{message}}</p>
<my-component></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var bus = new Vue();
Vue.component('my-component', {
template: `<button @click="handleEvent">传递事件</button>`,
methods: {
handleEvent: function() {
bus.$emit('on-message', '来自组件my-component的内容')
}
}
})
new Vue({
el: "#app",
data: {
message: ''
},
mounted: function() {
var _this = this;
//监听来自bus实例的事件
bus.$on('on-message', function(msg) {
_this.message = msg;
})
}
})
</script>
</body> </html>
2、父链
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<p>{{message}}</p>
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: `<button @click="handleEvent">通过父链修改数据</button>`,
methods: {
handleEvent: function() {
this.$parent.message = '来自组件my-component的内容'
}
}
})
new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
</body> </html>
注：尽量少用，父子组件最好通过props和$emit来通信。
3、子组件索引
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<button @click="handleRef">获取子组件内容</button>
<p>父组件：{{message}}</p>
<my-component ref='comA'></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>子组件</div>',
data:function(){
return {
message:'子组件内容'
}
}
});
new Vue({
el: "#app",
data:{
message:''
},
methods:{
handleRef:function(){
var msg = this.$refs.comA.message;
this.message = msg;
}
}
})
</script>
</body> </html>
注：仅仅作为直接访问子组件的应急方案，避免在模板或者计算属性中使用$refs.
Vue 组件通信（组件间通信）的更多相关文章
- Android各组件/控件间通信利器之EventBus
实际项目开发过程中,经常遇到如下场景:不同的应用程序组件的控件间具有一定的相互关联性,其中用户对后者进行的某种操作会引起前者的相应改变.举一个具体的场景:以糗事百科为例,在糗事列表页和详情页页,对于每 ...
- volatile关键字与线程间通信
>>Java内存模型 现在计算机普遍使用多处理器进行运算,并且为了解决计算机存储设备和处理器的运算速度之间巨大的差距,引入了高速缓存作为缓冲,缓存虽然能极大的提高性能,但是随之带来的缓存一 ...
- JUC-线程间通信
面试题: 两个线程,一个线程打印1-52,另一个打印字母A-Z打印顺序为12A34B...5152Z, 要求用线程间通信 线程间通信:1.生产者+消费者2.通知等待唤醒机制 多线程编程模版中 1.判断 ...
- can板间通信代码学习
一.板间通信 板间通信是底盘与上下云台之间的通信 A型板和两个C型板 主要可以分成两个方面,一是哨兵的模式选择和遥控器数据的解码:二是对于CAN发送和接收数据的处理. 二.CAN的板间通信相关函数 c ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- Vue 根组件,局部,全局组件 | 组件间通信,案例组件化
一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
随机推荐
- npp插件-NewFileBrowser:自定义模板
☞ 概述 NewFileBrowser用于定义文件的初始化文本.当我们创建一个jsp文件,或者spring bean的配置文件,或者maven的pom文件... 总有一些内容是固定的:把这些内容建立成 ...
- NGUI的异步场景加载进度条
1.直接创建三个场景,其中第二个场景是用来显示进度条加载的界面,进度条用UISlider,不会的看我前面的博文就可以了. 2.这里提供两种方法,建议使用第一种,加载比较平缓 方法一: using Sy ...
- 3000大洋，自己配置i5主机
自用的HP笔记本已经“七年之痒”了,所以在2016年新年之前,换了台新电脑.主要用来娱乐(电影),但是也要能够满足工作学习(本人从事IT行业)的需要. 遵循本人一贯的高冷装X的习惯,决定自己买配件攒机 ...
- codevs 1014 装箱问题 2001年NOIP全国联赛普及组
题目描述 Description 有一个箱子容量为V(正整数,0<＝V<＝20000),同时有n个物品(0<n<＝30),每个物品有一个体积(正整数). 要求n个物品中,任取若 ...
- BZOJ 1106 [POI2007]立方体大作战tet（树状数组）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1106 [题目大意] 给定玩家一个有2n个元素的栈,元素一个叠一个地放置. 这些元素拥有 ...
- [NOIp2016提高组]天天爱跑步
题目大意: 有一棵n个点的树,每个点上有一个摄像头会在第w[i]秒拍照. 有m个人再树上跑,第i个人沿着s[i]到t[i]的路径跑,每秒钟跑一条边. 跑到t[i]的下一秒,人就会消失. 问每个摄像头会 ...
- 条件注释判断浏览器<!--[if !IE]>
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...
- [转]解析UML建模语言中的UML图分类、 UML各种图形及作用
本文向大家介绍一下UML图分类,作为一种建模语言,UML的定义包括UML语义和UML表示法两个部分. UML图大致可分为五类,共有九种图形. AD: 本文和大家重点讨论一下UML图分类,标准建模语言U ...
- Linux PHP 编译参数详解(二)
对于喜欢玩开源软件的童鞋么,都喜欢自己编译安装程序,本文说明下如何编译安装php的详细参数. 示例: ./configure \ --prefix=/usr/local/php --with-zlib ...
- C# 获取文件版本
var versionInfo = FileVersionInfo.GetVersionInfo(filePath); String productVersion = versionInfo.Prod ...