Vue 数据道具与插槽：让子组件数据成为父组件 v-model

javascript

2024-03-14 00:07:02

## 通过 Vue 插槽将数据道具传递给组件以用作 v-model

导言

在 Laravel 应用程序中使用 Vue 组件进行页面布局时，将数据道具传递给组件以用作 v-model 对于创建动态和可重用的组件至关重要。本文将逐步指导你如何实现这一目标，并使用真实世界的示例来展示解决方案。

问题陈述

设想你有一个用于显示数据的 Vue 组件，该数据由表单输入过滤。每个页面都有一个包含不同过滤参数的表单，你需要一种方法将这些参数动态地传递给布局组件。

解决方案

使用动态组件和插槽

要解决这个问题，我们可以利用 Vue 的动态组件和插槽特性。通过使用动态组件，我们可以根据插槽名称创建不同的组件，从而实现数据道具的传递。

详细步骤

1. 使用动态组件

在布局组件中，将表单插槽替换为动态组件：

<component :is="getComponentName('form')" v-on:form-submitted="emitFormValues">
    <template v-slot:default>
        <!-- Form Slot -->
        <slot name="form"></slot>
    </template>
</component>

2. 创建动态组件

在布局组件中，添加一个方法来根据传入的插槽名称创建动态组件：

methods: {
    getComponentName(slotName) {
        return `dynamic-form-${slotName}`;
    }
}

3. 在子组件中注册动态组件

在子组件中，注册动态组件：

<dynamic-form-form>
    ... FORM INPUTS/PARAMS
</dynamic-form-form>

通过这些更改，数据道具现在可以从子组件通过动态组件传递到布局组件。

实际示例

考虑以下示例：

布局组件 (layout-component.vue) ：

<template>
    <div>
        <div v-if="hasSlot('form')">
            <component :is="getComponentName('form')" v-on:form-submitted="emitFormValues">
                <template v-slot:default>
                    <slot name="form"></slot>
                </template>
            </component>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        getComponentName(slotName) {
            return `dynamic-form-${slotName}`;
        }
    }
}
</script>

子组件 (page-a-component.vue) ：

<template>
    <layout-component v-on:form-submitted="handleFormSubmission">
        <template v-slot:form>
            <dynamic-form-form>
                <select v-model="params.input_a" name="input_a">
                    <option></option>
                </select>

                <input v-model="params.input_b" name="input_b">
            </dynamic-form-form>
        </template>
    </layout-component>
</template>