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

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

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

Answer 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 slot-scope="{model}">
            <input type="text" name="firstname" :model="model.firstname" />
            <input type="text" name="lastname" :model="model.lastname" />
        </template>
    </appform>
</template>

注意：在版本2.5之前，用于标识范围的属性只是scope。从2.5开始，它已重命名为slot-scope。根据您的版本使用适当的属性。

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

Answer 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可能会在没有进一步通知的情况下静默失败。

Vuejs在父组件中使用slot变量

2 个答案: