Vuejs 在父组件中使用插槽变量

Question

假设我们有一个表单组件：

<!-- appform.vue -->
<template>
    <form @submit.prevent="onSubmit">
        <slot></slot>
        <input type="submit">
    </form>
</template>

在我的应用程序中，我想使用它并向其动态添加表单域：

<!-- app.vue -->
<template>
    <appform>
        <input type="text" name="firstname" />
        <input type="text" name="lastname" />
    </appform>
</template>

现在我需要告诉 vuejs，我想将每个输入字段绑定到 appform 组件数据字段的“模型”变量。

<!-- app.vue -->
<template>
    <appform>
        <input type="text" name="firstname" :model="model.firstname" />
        <input type="text" name="lastname" :model="model.lastname" />
    </appform>
</template>

当然，这是行不通的，因为 vuejs 说，该模型不在应用程序数据字段内。如何告诉它使用 appform 组件的“模型”而不是当前范围？

Answer 1

您需要使用作用域 slot。

在appform.vue，暴露model在插槽上。

<template>
    <form @submit.prevent="onSubmit">
        <slot :model="model"></slot>
        <input type="submit">
    </form>
</template>

然后在 中app.vue，添加一个作用域模板。

<template>
    <appform>
        <template v-slot="{model}">
            <input type="text" name="firstname" :model="model.firstname" />
            <input type="text" name="lastname" :model="model.lastname" />
        </template>
    </appform>
</template>

此外，在您使用的输入元素上:model="model.firstname"。这对我来说似乎是一个错误。input元素没有model属性。您可能打算使用v-model="model.firstname".