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 组件通信(组件间通信)的更多相关文章

  1. Android各组件/控件间通信利器之EventBus

    实际项目开发过程中,经常遇到如下场景:不同的应用程序组件的控件间具有一定的相互关联性,其中用户对后者进行的某种操作会引起前者的相应改变.举一个具体的场景:以糗事百科为例,在糗事列表页和详情页页,对于每 ...

  2. volatile关键字与线程间通信

    >>Java内存模型 现在计算机普遍使用多处理器进行运算,并且为了解决计算机存储设备和处理器的运算速度之间巨大的差距,引入了高速缓存作为缓冲,缓存虽然能极大的提高性能,但是随之带来的缓存一 ...

  3. JUC-线程间通信

    面试题: 两个线程,一个线程打印1-52,另一个打印字母A-Z打印顺序为12A34B...5152Z, 要求用线程间通信 线程间通信:1.生产者+消费者2.通知等待唤醒机制 多线程编程模版中 1.判断 ...

  4. can板间通信代码学习

    一.板间通信 板间通信是底盘与上下云台之间的通信 A型板和两个C型板 主要可以分成两个方面,一是哨兵的模式选择和遥控器数据的解码:二是对于CAN发送和接收数据的处理. 二.CAN的板间通信相关函数 c ...

  5. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  6. 【Vue】利用父子组件间通信实现一个场景

    组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...

  7. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  8. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  9. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  10. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

随机推荐

  1. EXISTS运算符

    和IN.ANY.ALL等运算符不同,EXISTS运算符是单目运算符,它不与列匹配,因此它也不要求待匹配的集合是单列的.EXISTS运算符用来检查每一行是否匹配子查询,可以认为EXISTS就是用来测试子 ...

  2. JZYZOJ1457 [NOIP2016]换教室 期望dp 动态规划 floyd算法 最短路

    http://172.20.6.3/Problem_Show.asp?id=1457 我不知道为什么我倒着推期望只有80分,所以我妥协了,我对着题解写了个正的,我有罪. #include<cst ...

  3. [NOIP 2004] T3 合并果子

    居然和BZOJ 1724完全一样o(╯□╰)o #include <bits/stdc++.h> using namespace std; typedef long long ll; in ...

  4. [2018湖南省队集训] 6.28 T2 color

    毒瘤计数题2333,(小声)k其实可以出到1e9,不过这样求组合数的时候就要记1000种数的1~1000次下降幂(用到的组合数中第一维在1e9级别的只有1000种左右,第二维都是<=1000), ...

  5. 【思路】Aizu - 1367 - Rearranging a Sequence

    给你一个1~n排好的数组,每次提一个数到最前面,问你最后形成的序列. 就把他的输入顺序倒过来输出即可.没出现过的再按原序输出. #include<cstdio> using namespa ...

  6. 【kd-tree】hdu5992 Finding Hotels

    比较裸的kd-tree,但是比较考验剪枝. 貌似除了经典的矩形距离剪枝之外, 还必须加个剪枝是某个矩形内的最小价格如果大于价格限制的话,则剪枝. #include<cstdio> #inc ...

  7. cocos2d-x解析xml时的Bug

    cocos2d-x中使用tinyxml解析xml配置.如下: tinyxml2::XMLDocument doc; if (tinyxml2::XML_SUCCESS != doc.LoadFile( ...

  8. OPENCV下SIFT算法使用方法笔记

    这几天继续在看Lowe大神的SIFT神作,看的眼花手脚抽筋.也是醉了!!!!实在看不下去,来点干货.我们知道opencv下自带SIFT特征检测以及MATCH匹配的库,这些库完全可以让我们进行傻瓜似的操 ...

  9. 通过简单的SSH隧道实现穿越上网(转)

    说明:很惊讶,原来强大的SSH也能实现穿越上网,且配置真的很简单,比OpenVPN简单很多.当然,除了代理简单上网之外,其余功能就没OpenVPN那么的强大,对于用哪个就需要自己去衡量.SSH建立的隧 ...

  10. CentOS 5/6安装后的必备设置(转)

    说明:转自各大优化方案,相当于是一个大杂烩,后续会搞成是一个Shell脚本简化操作. 1.修改ip地址.网关.主机名.DNS等 (这个操作可以使用Setup工具进行配置,但不建议使用,封装太多,没有配 ...