上一篇了解了组件的概念及在使用中需要注意的地方。在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题。那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题。
父组件向子组件在进行传递时,使用的是 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
中的数据。那么当需要向父组件进行某种反馈时怎么办呢?
假设现在我们有一个登录弹出框的组件,通过子组件的方式调用了,当我们登录成功时该如何通知父组件做出相应的反应呢?
this.$emit('事件名', 参数)
v-model
、组件中 model
选项与 input
事件模拟成 input
控件,对父组件中的值进行更新.sync
修饰符进行 “双向绑定”这里只介绍第一种方式,因为后两种方式若羽也没用过几次 o(╯□╰)o
约定较少,主要注意使用时是和组件不同的,名称需要完全匹配。
首先我们在子组件中定义事件,说是定义,不如说是调用。因为是子组件直接在某段逻辑中调用的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
。
这一点需要注意。
这一篇内容较少,因为接下来的入门篇将会用项目实践来更好的演示它们的用法。同时,初学之时也不太建议在用法多样性上关注太多。
在实践中学习、成长
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1vu8349ugeh09