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 相关文章推荐
简单介绍jsonp 使用小结
Jan 27 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
vue实例的选项总结
Jun 09 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Django权限机制实现代码详解
2018/02/05 Python
详解Python 正则表达式模块
2018/11/05 Python
python样条插值的实现代码
2018/12/17 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
Java基础知识面试要点
2016/07/29 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
办公室助理岗位职责
2013/12/25 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL