时间戳

首页 > 解决方案 > Vue，分离出组件模板

vue.js - Vue，分离出组件模板

问题描述

目前我的组件有一个相当大的模板。我想把它的各个方面分离到它自己的组件中。

但是我正在努力将数据传递给这个组件。我仍然希望能够操作子级中的数据并更新父级中的数据。因此，例如，如果我传入一个对象，然后v-model在文本框中的子级中使用，则更改应该反映在父级中。

所以，我假设当我遍历对象列表时，我会将v-model它们放入我的子组件中，如下所示：

主.vue

<card v-for="quote in quotes" v-model="quote"></card>

然后当然接受新模型中的输入：

Card.vue

export default {
        props: [ 'input' ]
    }

但是我收到以下错误，我真的无法理解它。

您将 v-model 直接绑定到 v-for 迭代别名。这将无法修改 v-for 源数组，因为写入别名就像修改函数局部变量一样。考虑使用对象数组并在对象属性上使用 v-mode l。

标签： vue.js

解决方案

推荐阅读