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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
JObj预览一个JS的框架
Mar 13 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 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
Syphon 秘笈
2021/03/03 冲泡冲煮
php自定义apk安装包实例
2014/10/20 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Python中enumerate函数代码解析
2017/10/31 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
数据库专业英语
2012/11/30 面试题
中软国际Java程序员机试题
2012/08/19 面试题
求职信怎么写
2014/05/23 职场文书
清洁工岗位职责
2015/02/13 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python