详解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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
Vue实现附件上传功能
May 28 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
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
sony ICF-2010 拆解与改装
2021/03/02 无线电
php存储过程调用实例代码
2013/02/03 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
JavaScript伪数组用法实例分析
2017/12/22 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python中get和post有什么区别
2020/06/19 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
外贸公司实习自我鉴定
2013/09/24 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
八一演出活动方案
2014/02/03 职场文书
个人存款证明书
2014/10/18 职场文书
委托公证书格式
2015/01/26 职场文书
机关保密工作承诺书
2015/05/04 职场文书
外科护士长工作总结
2015/08/12 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS