Vue.js VUEJ在父组件内使用插槽变量

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

<!-- 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组件的数据字段的“model”变量

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

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

您需要使用

在

appform.vue

中，在插槽上显示

model

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

另外，在您的输入元素上使用的是

：model=“model.firstname”

。我觉得这是个错误<代码>输入元素没有

模型

属性。您可能打算使用

v-model=“model.firstname”

您需要使用

在

appform.vue

中，在插槽上显示

model

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

---

另外，在您的输入元素上使用的是

：model=“model.firstname”

。我觉得这是个错误<代码>输入元素没有

模型

属性。您可能打算使用

v-model=“model.firstname”

自Vue 2.6.0以来，

插槽范围

指令已被弃用。

v-slot

指令允许您使用作用域插槽（以及命名插槽）：

---

尽管不会产生错误，但使用

插槽范围

可能会自动失败，无需另行通知。

自Vue 2.6.0以来，

插槽范围

指令已被弃用。

v-slot

指令允许您使用作用域插槽（以及命名插槽）：

---

即使不会产生错误，使用

插槽作用域

似乎会自动失败，无需另行通知。

您能帮助我理解appform组件的用途吗？appform应该只封装一些默认的表单行为（设置操作、方法等）。出于演示目的，我没有将逻辑包含在文章中，因为这对我的问题不是必需的。您能帮助我理解appform组件的用途吗？appform应该只封装一些默认的表单行为（设置操作、方法等）。出于演示的目的，我没有在帖子中加入逻辑，因为这对于我的问题来说是不必要的。这正是我想要的。我在文档中读到过，但我的错误是，我忘了添加“{”around model。@bernhardh您在

appform

中添加到插槽的所有属性都作为单个对象传递。语法，

slot scope=“{model}”

实际上是在分解该对象（es6语法）。如果您没有分解，请使用

slot scope=“props”

，则传递的模型属性将作为

props.model

访问。这正是我要寻找的。我在文档中阅读了它，但我的错误是，我忘了在模型周围添加“{”属性。@bernhardh在

appform

中添加到插槽的所有属性都作为单个对象传递。语法，

slot scope=“{model}”

实际上是在解构该对象（一种es6语法）。如果没有解构，比如说使用

slot scope=“props”

，则传递的模型属性将作为

props.model

访问。