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之ESC(第二类混淆)
May 06 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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
用session做客户验证时的注意事项
2006/10/09 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php绘制一条弧线的方法
2015/01/24 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
七年级作文之秋游
2019/10/21 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
快速学习Oracle触发器和游标
2021/06/30 Oracle
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Oracle中DBLink的详细介绍
2022/04/29 Oracle