Vue 子组件与数据传递问题及注意事项
前端  /  管理员 发布于 4年前   501
在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题。那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题。
如何传递
父组件向子组件在进行传递时,使用的是 prop 特性进行传递。
约定
老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件:
定义
首先在子组件中定义:
// Child.vue
export default { name: 'child' props: ['teamList']}
这里使用了 驼峰命名 ,在传值时需注意要转换成 短横线分隔命名 。
我们定义了一个 teamList 的变量,此时我们就可以在这个组件中通过 this 使用这个变量了(同 data 中的数据)。
传值
在父组件中进行传值:
父组件中使用 v-bind
即可将数据传递下去了。
向子组件传递数据就是这么简单,本质上和 data 一样,只是这里单独使用 prop 特性将其区分开来。
需要注意的时:
通过 prop 特性传递下去的数组是 “单向”绑定的,父组件对数组的更新会影响到子组件。因此并不建议子组件对 prop 特性中的值进行修改
Js中在传递对象和数组时传递的时引用!因此:当子组件修改父组件传递下来的对象/数组时会影响到父组件中的状态
这个特性有利有弊,在某些情况下可以通过这种类似 hack 的方式来进行处理。
子组件反向传递
上面说到了,并不建议在子组件中修改 props 中的数据。那么当需要向父组件进行某种 反馈 时怎么办呢?
假设现在我们有一个登录弹出框的组件,通过子组件的方式调用了,当我们登录成功时该如何 通知 父组件做出相应的反应呢?
这里只介绍第一种方式,因为后两种方式若羽也没用过几次 o(s□t)o
emit使用约定
约定较少,主要注意使用时是和组件不同的,名称需要完全匹配。
emit使用
首先我们在子组件中定义事件,说是定义,不如说是调用。因为是子组件直接在某段逻辑中调用的 emit :
// child.vue
export default { methods: { submit() { this.$emit('submitForm', this.data) } }}
这里我们定义了调用的自定义事件名称为 submitForm ,那么在父组件中使用:
可以看到这里在使用时, v-on 绑定的事件名称是 submitForm 而不是 submit-form 。
这一点需要注意。
写在后面
以上所述是小编给大家介绍的Vue 子组件与数据传递问题及注意事项 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号