Vue 子组件与数据传递问题及注意事项


Posted in Javascript onJuly 11, 2019

在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题。那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题。

如何传递

父组件向子组件在进行传递时,使用的是 prop 特性进行传递。

约定

老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件:

  • 子组件的 props 中定义要传递的变量名
  • 变量名同组件的命名规范
  • 父组件传值时,需要使用 短横线分隔命名
  • 使用 v-bind 进行传值

定义

首先在子组件中定义:

// Child.vue

export default {
  name: 'child'
  props: ['teamList']
}

这里使用了 驼峰命名 ,在传值时需注意要转换成 短横线分隔命名 。

我们定义了一个 teamList 的变量,此时我们就可以在这个组件中通过 this 使用这个变量了(同 data 中的数据)。

传值

在父组件中进行传值:

<template>
  <div>
    <child v-bind:teamList="teamList"></child>
  </div>
</template>

父组件中使用 v-bind 即可将数据传递下去了。

向子组件传递数据就是这么简单,本质上和 data 一样,只是这里单独使用 prop 特性将其区分开来。

需要注意的时:

通过 prop 特性传递下去的数组是 “单向”绑定的,父组件对数组的更新会影响到子组件。因此并不建议子组件对 prop 特性中的值进行修改

Js中在传递对象和数组时传递的时引用!因此:当子组件修改父组件传递下来的对象/数组时会影响到父组件中的状态

这个特性有利有弊,在某些情况下可以通过这种类似 hack 的方式来进行处理。

子组件反向传递

上面说到了,并不建议在子组件中修改 props 中的数据。那么当需要向父组件进行某种 反馈 时怎么办呢?

假设现在我们有一个登录弹出框的组件,通过子组件的方式调用了,当我们登录成功时该如何 通知 父组件做出相应的反应呢?

  1. 通过自定义事件,子组件调用 this.$emit('事件名', 参数)
  2. 使用 v-model 、组件中 model 选项与 input 事件模拟成 input 控件,对父组件中的值进行更新
  3. .sync 修饰符进行 “双向绑定”

这里只介绍第一种方式,因为后两种方式若羽也没用过几次 o(?□?)o

emit使用约定

  • 事件名的命名规范同组件
  • 父组件在绑定子组件上的自定义事件时,必须 完全匹配 事件名,这里不像组件与子组件中使用时是使用的 短横线分隔命名 ,而是 完全匹配 。

约定较少,主要注意使用时是和组件不同的,名称需要完全匹配。

emit使用

首先我们在子组件中定义事件,说是定义,不如说是调用。因为是子组件直接在某段逻辑中调用的 emit :

// child.vue

export default {
  methods: {
    submit() {
      this.$emit('submitForm', this.data)
    }
  }
}

这里我们定义了调用的自定义事件名称为 submitForm ,那么在父组件中使用:

<!-- parent.vue -->

<template>
  <div>
    <child v-on:submitForm="submit"></child>
  </div>
</template>
<script>
export default {
  methods: {
    submit(data) {
      // 处理逻辑
    }
  }
}
</script>

可以看到这里在使用时, v-on 绑定的事件名称是 submitForm 而不是 submit-form 。

这一点需要注意。

写在后面

以上所述是小编给大家介绍的Vue 子组件与数据传递问题及注意事项 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
微信小程序 获取二维码实例详解
Jun 23 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
ES6的异步终极解决方案分享
Jul 11 #Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 #Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 #Javascript
vue webpack重写cookie路径的方法
Jul 10 #Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 #Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 #Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 #Javascript
You might like
PHP和.net中des加解密的实现方法
2013/02/27 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php简单日历函数
2015/10/28 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
jquery获取radio值实例
2014/10/16 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
建龙钢铁面试总结
2014/04/15 面试题
团结演讲稿范文
2014/05/23 职场文书
合伙经营协议书范本
2014/09/13 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
免职证明样本
2014/10/23 职场文书
2014年财政局工作总结
2014/12/09 职场文书
自荐信格式范文
2015/03/04 职场文书
留学推荐信英文范文
2015/03/26 职场文书
师范生教育见习总结
2015/06/23 职场文书
i7 6700处理器相当于i5几代
2022/04/19 数码科技