vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)


Posted in Javascript onJuly 27, 2020

vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系.

父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢?

父子组件通信

根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件.

我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父组件传递消息. 父组件做出相应的反应.

将父组件和子组件放入名为app的vue实例中

Vue.component('child', {
 props: ['fname'],
 template: `
  <div class="child">
   这是儿子, 我爸爸是{{fname}}
   <button @click="$emit('toFather')">点我通知爸爸</button>
  </div>
 `
})

Vue.component('father', {
 data() {
  return {
   info: '无消息'
  }
 },
 template: `
  <div class="father">
   这是父亲, {{info}}
   <child fname="father" @toFather="getSonMsg"></child>
  </div>
 `,
 methods: {
  getSonMsg() {
   this.info = '我收到儿子传来的消息了'
  }
 }
})
new Vue({
 el: '#app',
})

注意上面的组件定义顺序不能换

让后我们在html文件中写入即可

<div id="app">
  <father></father>
 </div>

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

点击按钮后发现我们的父组件发生了变化

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

点击这里可以查看效果

爷孙组件通信

因为vue只是说明了父子组件如何通信, 那么爷孙组件是没有办法直接通信的. 但是它们可以分解为两个父子组件通信.

即爷爷和父亲看成是一个父子组件, 而父亲和孙子看成是一个父子组件. 这样它们之间就可以进行通信了. 通过父亲组件合格桥梁, 可以实现爷孙的通信. (注意: 爷孙组件是无法直接通信的)

兄弟组件通信

兄弟组件通信即组件之间通信. 这就要用到观察者模式了. 因为vue实例的原型全部来自Vue.prototype. 那么我们就可以了将事件中心绑定到Vue.prototype的某个属性上, 暂且叫它为bus吧.

let bus = new Vue()

Vue.prototype.bus = bus

我们再定义两个组件, up组件和down组件, 当点击down组件中的按钮时, 会给up组件传递信息.

Vue.component('up', {
 data() {
  return {
   msg: '未传递消息'
  }
 },
 template: `
  <div class="up">
   <p>这是up组件, 下一行为down传递的消息</p>
   <p>{{msg}}</p>
  </div>
 `,
 mounted() {
  this.bus.$on('send', (msg)=> {
   this.msg = (msg)
  })
 }
})

Vue.component('down', {
 template: `
  <div class="down">
   <p>这是down</p>
   <button @click="toUp">点击我向up组件传递消息</button>
  </div>
 `,
 methods: {
  toUp() {
   this.bus.$emit('send', 'down来消息了')
  }
 }
})
new Vue({
 el: '#app',
})

并且将两个组件放入名为app的实例中

<div id="app">
  <up></up>
  <down></down>
 </div>

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

按钮被点击后, up组件会接收到消息

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

点击这里查看源代码

以上这篇vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
jQuery find和children方法使用
Jan 31 Javascript
js对象的比较
Feb 26 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 #Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 #Javascript
vue键盘事件点击事件加native操作
Jul 27 #Javascript
Element Cascader 级联选择器的使用示例
Jul 27 #Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 #Javascript
Element Rate 评分的使用方法
Jul 27 #Javascript
Element InputNumber计数器的使用方法
Jul 27 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JavaScript的Function详细
2006/11/14 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
JavaScript字符串对象
2017/01/14 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python队列queue模块详解
2018/04/27 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
新疆民族团结演讲稿
2014/08/27 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
防灾减灾标语
2014/10/07 职场文书