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 相关文章推荐
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
javascript操作数组详解
Dec 17 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
使用vue cli4.x搭建vue项目的过程详解
May 08 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/02 无线电
php 全局变量范围分析
2009/08/07 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python 实现批量图片识别并翻译
2020/11/02 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
档案工作个人总结
2015/03/03 职场文书
学校捐款活动总结
2015/05/09 职场文书
雷锋的故事观后感
2015/06/10 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python