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 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
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内存溢出问题的解决方法
2013/06/25 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
python中def是做什么的
2020/06/10 Python
Python eval函数介绍及用法
2020/11/09 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
上课睡觉检讨书
2014/01/28 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
教师考察材料范文
2014/06/03 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技