详解Vue组件之间的数据通信实例


Posted in Javascript onJune 17, 2017

最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~

关于父子组件以及非父子组件之间的数据通信

详解Vue组件之间的数据通信实例

1 父子组件之间数据通信

一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改。而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递。(是不是有点懵逼了,看个例子吧 )

(这里我就直接摘取一段项目中的例子代码来说明)

使用prop进行数据传递:

//这是父组件中的部分代码,父组件向子组件<handle-Employee><handle-Employee>传递数据(method,dialogFormvisible)
 // 父组件的部分代码
<!--添加员工模块-->
   <div class="add">
    <el-button type="primary" icon="edit" @click="handleAdd">新增员工</el-button>
    <handle-Employee :method="method"
     :dialogFormVisible="dialogFormVisible" @close="closeDialog" @getEmployee="getEmployee"></handle-Employee>
   </div>
  </div>
// 父组件的script代码
 export default {
  data () {
   return {
    method:{handle: 'add‘, title: '增加员工'}
    dialogFormvisible: false
 }
 } 
}

// 子组件中则需要加prop属性数据 ,如下所示:
 export default {
   props: [ 'method', 'dialogFormVisible']
 }

//所以只要父组件中的数据变化修改,子组件中的数据也会跟这修改;

在chrome中用vue-devtool其实也可以看到相关的数据属性;

详解Vue组件之间的数据通信实例

当然,子组件做完相关操作之后,需要时间的是将属性值dialogFormVisible重新修改为false。若是直接在子组件进行修改的话,就会报错,因为会影响到父组件的数据,vue中规定不能直接对prop的属性值进行修改。那么就可以用事件触发来实现子组件向父组件传递数据了。

详解Vue组件之间的数据通信实例

///父组件监听子组件的事件,通过@close="closeDialog"和@getEmployee="getEmployee"来实现监听;
一旦子组件中的事件close和getEmployee发生之后,就会触发父组件中的事件closeDialog和getEmployee事件。
// 父组件的部分代码
<div class="add">
  <el-button type="primary" icon="edit" @click="handleAdd">新增员工</el-button>
  <handle-Employee :method="method" :dialogFormVisible="dialogFormVisible" @close="closeDialog" ></handle-Employee>
</div>

//子组件中的事件分发 
export default {
methods: {
 // 关闭弹出框
   closeDialog () {
    this.$emit('close', false)  //这里就是直接触发子组件的close事件,一旦这个执行,父组件中的对应方法就会执行。
   }
}
}
// 当那边触发关闭事件的时候,这边的显示值就要关闭,那边会传过来一个false

// 父组件的事件
export default {
methods: {
 // 当那边触发关闭事件的时候,这边的显示值就要关闭,那边会传过来一个false
  closeDialog (val) {
    this.dialogFormVisible = val
   }
}
}

这样就实现了父子组件之间的数据传递;

2 实现非父子组件之间的数据传递

通过建立中间的事件bus总线。实现非父子组件之间的数据通信。

  1. 首先建立事件bus,我会新建一个bus.js文件;注册bus。
  2. 分别在组件中使用emit和on实现数据之间的通信;

1 bus.js文件

//bus.js,注册Bus
import Vue from 'vue'
export default new Vue()

2 组件emit触发事件

<template>
 <div class="add-task" :class="{'ishide':isAdding}" @click="addtask()">
  <i class="fa fa-plus-circle" aria-hidden="true"></i>
  添加任务
 </div>
</template>
<script>
 import Bus from '@/bus'
 export default {
 methods: {
 props: ['index'],
  data () {
   return {
    isAdding: false
   }
  },
   addtask () {
    this.isAdding = true
    Bus.$emit('adding-task', this.isAdding, this.index) // 这里触发的事件是'adding-task',
    传递了两个参数,分别是this.isAdding和this.index
    this.$emit('addtask')
   }
  }
 }

3 另外一个组件on接收事件

// 模板中的代码就不展示了。
主要展示的是script中的代码
export default{
data() // 这里的数据也不一一显示啦;
created () {
// 这里使用on监听了adding-task事件,接收到两个参数。所以一旦上面的组件中的adding-task事件触发,这里就会监听到。
   Bus.$on('adding-task', (state, index) => {
    if (this.index === index) {
     this.isShow = state
    }
   })
  }
}

缺点:

有时候小的子组件在页面中有很多个,需要复用,那么为了防止每一次触发相应的事件的时候,都会影响到监听的对应组件,如下图所示。我的解决方案就是给每一个循环的子组件赋值一个index的值;

详解Vue组件之间的数据通信实例

//这里我会在每一次组件emit的时候传递一个index的值,另外一个组件on之后接受参数,会先判断该index是不是与自己的index相等,如果相等才执行相应的数据改变操作。
 Bus.$on('adding-task', (state, index) => {
    if (this.index === index) {
     this.isShow = state
    }

今天先到这里,困了。还有更复杂的数据通信是用vuex,不过我现在的项目应该是暂时还不会用到,所以以后用到再去深入了解。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 #Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 #Javascript
js简易版购物车功能
Jun 17 #Javascript
Webpack如何引入bootstrap的方法
Jun 17 #Javascript
Webpack执行命令参数详解
Jun 17 #Javascript
You might like
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP面向对象详解(三)
2015/12/07 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
使用js实现的简单拖拽效果
2015/03/18 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
JavaScript制作简单的框选图表
2017/05/15 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
python分割文件的常用方法
2014/11/01 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
对python3新增的byte类型详解
2018/12/04 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python连接mongodb集群方法详解
2020/02/13 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
出国签证在职证明
2014/09/20 职场文书
护士个人年终总结
2015/02/13 职场文书
辞职信怎么写
2015/02/27 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书