Vue.js组件间通信方式总结【推荐】


Posted in Javascript onNovember 23, 2018

平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信。组件之间通信分为三种:父-子;子-父;跨级组件通信。下面,就组件间如何通信做一些总结。

1.父组件到子组件通过props通信

在组件中,使用选项props来声明需要从父级组件接受的数据,props的值可以是两种:一种是字符串数组,一种是对象。props中声明的数据与组件data函数return的主要区别在于props来自父级,而data中的组件是自己的数据,作用域是组件本身,这两种数据都可以在模板template及计算属性computed和方法methods中使用。如以下例子:

// 父组件 ParentComponent
<template>
 <div class="parent-component">
 <h2>这是一个父组件</h2>
 <ChildComponent :parentMessage="parentMessage"/>
 </div>
</template>
<script>
 import ChildComponent from './ChildComponent'
 export default {
 name: "ParentComponent",
 data(){
  return{
  parentMessage:'这是来自父组件的数据'
  }
 },
 components:{
  ChildComponent
 }
 }
</script>
// 子组件 ChildComponent
<template>
<div class="child-component">
 <h2>这是一个子组件</h2>
 <h3>{{parentMessage}}</h3>
</div>
</template>
<script>
 export default {
 name: "ChildComponent",
 props:["parentMessage"]
 }
</script>

Vue.js组件间通信方式总结【推荐】

小结:父组件传递个子组件的数据可以写死,也可以用父级的动态数据用v-bind来绑定props的值。

2.子组件到父组件通过$emit,$on通信

当子组件需要向父组件传递数据时,就要用到自定义事件,v-on指令除了监听DOM事件外,还可以用于组件间的自定义事件,Vue组件有一套类似与观察者模式的一套模式,子组件用$emit()来触发事件,父组件用$on()来监听子组件的事件。举个例子如下:

// ParentComponent 父组件
<template>
 <div class="parent-component">
 <h2>这是一个父组件total:{{total}}</h2>
 <ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
 </div>
</template>
<script>
 import ChildComponent from './ChildComponent'
 export default {
 name: "ParentComponent",
 data(){
  return{
  parentMessage:'这是来自父组件的数据',
  total:10,
  }
 },
 components:{
  ChildComponent
 },
 methods:{
  getTotal(total){
  this.total=total;
  console.log('ParentComponent total:',total);
  }
 }
 }
</script>
// ChildComponent 子组件
<template>
<div class="child-component">
 <h2>这是一个子组件</h2>
 <h3>{{parentMessage}}</h3>
 <button @click="handleAdd10">+10按钮</button>
</div>
</template>
<script>
 export default {
 name: "ChildComponent",
 props:["parentMessage","total"],
 methods:{
  handleAdd10(){
  let total=this.total+10;
  console.log('ChildComponent $emit:');
  this.$emit('handleAdd10',total);
  }
 }
 }
</script>

结果:

Vue.js组件间通信方式总结【推荐】

上面例子中,子组件有一个按钮,实现加10的效果,子组件通过props项来接收父组件传入的total值,在改变total后,通过$emit把它传给父组件,父组件定义事件@handleAdd10方法,子组件$emit()方法第一个参数是自定义事件的名称,后面的参数是要传的数据,对应的父组件通过getTotal(total)来接收子组件传递的数据,由此子组件到父组件通信完成。

 3.表单子组件到父组件通过v-model来通信(语法糖)

// ParentComponent 改动如下
**
<h2>这是一个父组件total:{{total}}</h2>
<ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
<InputComponent v-model="total"/>
**
<script>
import InputComponent from './InputComponent'
</script>
**
// InputComponent 子组件
<template>
 <input type="text" @input="updateValue($event)">
</template>
<script>
 export default {
 name: "InputComponent",
 methods:{
  updateValue(evt){
  this.$emit('input',evt.target.value)
  }
 }
 }
</script>

 结果如下:

Vue.js组件间通信方式总结【推荐】

以上示例中:因为子组件的石建明是特殊的input,在使用组件的父级,可以通过v-model来绑定数据total,这种实现方式也可以称作语法糖,大大减少了父组件代码量。

4.非父子组件通过中央事件总线(bus)来通信

在vue.js2.x中推荐使用一个空的Vue实例作为中央事件总线(bus),先看一个例子:

// ParentComponent 父组件
<template>
 <div class="parent-component">
 {{message}}
 <br>
 <br>
 <component-a/>
 </div>
</template>

<script>
 import Vue from 'vue'
 let bus=new Vue();
 export default {
 name: "ParentComponent",
 data(){
  return{
  message:'',
  }
 },
 components:{
  componentA:{
  template:'<button @click="handleClick">传递事件</button>',
  methods:{
   handleClick(){
   bus.$emit('on-message','来自子组件component-a的内容')
   }
  }
  }
 },
 mounted(){
  bus.$on('on-message',(msg)=>{
  this.message=msg;
  });
 }
 }
</script>

结果如下:

Vue.js组件间通信方式总结【推荐】

以上例子中:首先创建了一个bus的空Vue实例,里面没有任何内容,然后全局定义了组件component-a,,在父组件ParentChild的生命周期mounted钩子函数中监听来自bus的事件on-message。而在组件component-a中,点击按钮会通过bus把事件on-message发出去,父组件会接受来自bus的事件,改变message的值。

这种方法巧妙轻量的实现了任何组件之间的通信,包括父子,兄弟,跨级组件。

5.状态管理与Vuex与总结

在实际业务中,经常会有跨组件共享数据的需求,如果项目不复杂,使用bus就能简单的解决问题,但是使用bus在数据的管理、维护、架构设计上还只是一个简单的组件,在大型单页应用,多然开发的项目中,Vuex能更加优雅和高效的完成状态管理。

Vue.js组件间通信方式总结【推荐】

总结

以上所述是小编给大家介绍的Vue.js组件间通信方式总结【推荐】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
JS常用知识点整理
Jan 21 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 #Javascript
vue全局使用axios的方法实例详解
Nov 22 #Javascript
vue中的ref和$refs的使用
Nov 22 #Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 #Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 #Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 #Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 #Javascript
You might like
PHP往XML中添加节点的方法
2015/03/12 PHP
php加密解密字符串示例
2016/10/13 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python的词法分析与语法分析
2013/05/18 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
班组长安全职责
2014/01/05 职场文书
酒店前台辞职书
2015/02/26 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB