Vuejs在父组件内使用槽变量答案

【问题标题】：Vuejs use slot variable inside parent componentVuejs在父组件内使用槽变量
【发布时间】：2018-04-25 08:09:49
【问题描述】：

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

<!-- 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 组件的“模型”而不是当前范围？

【问题讨论】：

你能帮我理解appform组件的用途吗？
appform 应该只封装一些默认的表单行为（设置动作、方法等）。出于演示目的，我没有在帖子中包含逻辑，因为我的问题没有必要。

标签： vue.js vuejs2

【解决方案1】：

您需要使用scoped 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"。

【讨论】：

这正是我要找的。我在文档中阅读了它，但我的错是我忘记添加“{”环绕模型。
@bernhardh 您添加到appform 中的槽的所有属性都作为单个对象传递。语法 slot-scope="{model}" 实际上是在解构该对象（一种 es6 语法）。如果你没有解构，比如slot-scope="props"，那么传递的模型属性将被访问为props.model。

【解决方案2】：

自 Vue 2.6.0 起，slot-scope 指令已被弃用。 v-slot 指令允许您使用作用域槽（以及命名槽）：

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

即使它没有产生错误，但使用slot-scope 似乎可以静默失败，无需另行通知。

【讨论】：