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实现Sleep函数的代码
Mar 04 Javascript
分页栏的web标准实现
Nov 01 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
详解AngularJS 模块化
Jun 14 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python实现扫雷游戏的示例
2020/10/20 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
单位办理社保介绍信
2014/01/10 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
IT工程师岗位职责
2014/07/04 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书