Question

我对Vue有些新意，我在将formData传递给我个人的子节点时遇到了特别的困难。理想情况下，每个子节点只更新父formData对象，允许我稍后提交表单数据。

我已经设置了一个JSFiddle来说明：https://jsfiddle.net/3nm1mrLo/

我目前的想法是我应该v-bind:field="formData.name"，但这会引发错误。似乎基于插槽的HTML中不存在formData。

任何指针都会感激不尽。谢谢！

Answer 1

正如您所说，您需要使用v-bind:field="formData.name"或:field="formData.name"。

它无效，因为您已直接在html中定义了主应用模板，并使用“内容分发”来包含<example-form>和<example-input>。

正如文档中所定义的，此内容分发（或者如果您熟悉Angular 1.x的“transclusion”）工作正常，但范围属于主应用程序（根实例，因为模板属于它）。

参考：https://vuejs.org/v2/guide/components.html#Compilation-Scope

引用：

组件范围的简单经验法则是：

父模板中的所有内容都在父作用域中编译;子模板中的所有内容都在子范围内编译。

如果您感到好奇，请尝试按以下步骤更改主应用程序（根实例）：

new Vue({
    el: '*[my-app]',
    data: function() {
        return {
            formData: { name: 'abc', location: 'xyz'}
        };
    }
});

现在您将看到formData不再是undefined。

但更合适的方法是将<example-input>作为example-form组件模板的一部分包含在内，如下所示：

Vue.component('example-form', {
    template: `
        <div class="my-example-form">
            <form><pre>{{formData}}</pre><slot></slot></form>
            <example-input :field="formData.name"></example-input>
            <example-input :field="formData.location"></example-input>
        </div>
    `,
    data: function() {
        return {
            formData: { name: '', location: ''}
        };
    }
});

现在它会像你期望的那样绑定到正确的formData。

但这仍然不适合你，因为props只是单向绑定。子组件（example-input）将获取值，但不会将数据更改传递回父组件（example-form）

让孩子将数据传回父母，正确的方法是使用$emit，如此问题中所述：Updating parent data via child component?

如果你想让一个<example-input>组件作为表单元素工作，这里的相关答案就像你期望的那样：https://stackoverflow.com/a/40337942/654825 - 还有一个工作的jsFiddle。

将双向绑定支柱传递到插槽

1 个答案: