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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
用js实现放大镜效果
Oct 28 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
长波有什么东西
2021/03/01 无线电
实用函数5
2007/11/08 PHP
php 前一天或后一天的日期
2008/06/28 PHP
PHP 组件化编程技巧
2009/06/06 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Python深入学习之装饰器
2014/08/31 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python发送告警邮件脚本
2018/09/17 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
Python的logging模块基本用法
2020/12/24 Python
PHP数据运算类型都有哪些
2013/11/05 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
森林防火工作方案
2014/02/14 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
会计核算科岗位职责
2014/03/19 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
检讨书怎么写?
2019/06/21 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle