vue中子组件修改父组件中传入的数据
vue中父子组件数据修改的问题文章目录vue中父子组件数据修改的问题前言一、子组件能否直接修改父组件中传入的数据?如何才能解决父子组件之间数据的双向绑定呢?二、使用步骤1.引入库2.读入数据总结前言这篇文章主要针对vue2中的父子组件之间,数据的修改以及方法的调用而展开的内容提示:以下是本篇文章正文内容,下面案例可供参考一、子组件能否直接修改父组件中传入的数据?官方文档(单项数据流,你不应该在一个
vue中父子组件数据修改的问题
前言
这篇文章主要针对vue中的父子组件之间,数据的修改以及数据同步方案的介绍
一、子组件能否直接修改父组件中传入的数据?
官方文档(单项数据流,你不应该在一个子组件内部改变 prop)给出的答案是否定的。
虽然官方建议不要在组件内部修改prop,但是在现实中,修改组件内部的prop实属平常事(*当你传入的prop为Object类型的时候,修改组件内部的prop可以对应的改变父组件中的值。如果传入的prop为简单类型(例如String,Number等)时,浏览器会报错,提示不能修改prop的值。)
那么,这样做有什么问题呢?
这样会导致父组件的数据指向不明,容易出现渲染问题。
二、如何才能解决父子组件之间数据的双向绑定呢?
在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件:
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
如果想要更改 prop 或事件名称,则需要在 ChildComponent 组件中添加 model 选项:
<!-- ParentComponent.vue -->
<ChildComponent v-model="pageTitle" />
// ChildComponent.vue
export default {
model: {
prop: 'title',
event: 'change'
},
props: {
// 这将允许 `value` 属性用于其他用途
value: String,
// 使用 `title` 代替 `value` 作为 model 的 prop
title: {
type: String,
default: 'Default title'
}
}
}
所以,在这个例子中 v-model 是以下的简写:
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />
使用 v-bind.sync
在某些情况下,我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此,我们建议使用 update:myPropName 抛出事件。例如,对于在上一个示例中带有 title prop 的 ChildComponent,我们可以通过下面的方式将分配新 value 的意图传达给父级:
this.$emit('update:title', newValue)
然后父组件可以在需要时监听该事件,并更新本地的 data property。例如:
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
为了方便起见,我们可以使用 .sync 修饰符来缩写,如下所示:
<ChildComponent :title.sync="pageTitle" />
在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
v-model 参数
若需要更改 model 的名称,现在我们可以为 v-model 传递一个参数,以作为组件内 model 选项的替代:
<ChildComponent v-model:title="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
这也可以作为 .sync 修饰符的替代,而且允许我们在自定义组件上使用多个 v-model。
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- 是以下的简写: -->
<ChildComponent
:title="pageTitle"
@update:title="pageTitle = $event"
:content="pageContent"
@update:content="pageContent = $event"
/>
我们可以在 Custom Events 部分中了解有关自定义 v-model 修饰符的更多信息。
总结
以上就是今天要讲的内容,本文仅仅简单介绍了vue中父子组件之间数据同步的方法,如想要了解更多,还是需要看看官方给的文档。
更多推荐
所有评论(0)