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 相关文章推荐
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
浅析vue深复制
Jan 29 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
python动态网页批量爬取
2016/02/14 Python
Python探索之ModelForm代码详解
2017/10/26 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
2016年3月份红领巾广播稿
2015/12/21 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL
Go获取两个时区的时间差
2022/04/20 Golang