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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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读取flv文件的播放时间长度
2009/09/03 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
Python自定义线程类简单示例
2018/03/23 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Python实现随机爬山算法
2021/01/29 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
自荐书格式
2013/12/01 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
教师节演讲稿
2014/05/06 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
离婚协议书格式
2014/11/21 职场文书
秋季运动会开幕词
2015/01/28 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python