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 相关文章推荐
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 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
set_include_path在win和linux下的区别
2008/01/10 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
小程序实现投票进度条
2019/11/20 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
电子商务自荐书范文
2014/01/04 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
公司离职证明样本
2014/09/13 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
护士业务学习心得体会
2016/01/25 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android
使用scrapy实现增量式爬取方式
2022/06/21 Python