在 Vue 3 中,v-model 是用于创建双向数据绑定的指令。通常,我们使用该指令将任何 HTML 表单元素与一个变量绑定以收集输入值。

但通常我们需要绑定一个表单元素,该元素存在于不同的组件中。在这种情况下,您必须使用 v-model 来自定义组件。

通过这种方式,您可以将变量与子组件内的 HTML 元素绑定。

在最新版本的 Vue 即 Vue 3 中,我们必须遵循与 Vue 2 中不同的规则。

在本文中,我将向您展示如何以最佳方式非常轻松地将 v-model 添加到 Vue 3 中的自定义组件中。

如果您使用的是 Vue 2,您可以关注我们关于如何将 v-model 添加到 Vue2 中的自定义组件的另一篇文章。

在 Vue 2 中,我们只有一种创建组件的方法。但是在 Vue 3 中,我们可以通过 3 种不同的方式创建组件。

• 选项 API(这是 Vue 2 中提供的旧样式)。

• 组合 API。

• SFC(单文件组件)脚本设置。

我将向您展示如何使用这三种方式使用 v-model 来自定义组件。

先决条件

在阅读本文之前,您需要满足一些基本要求。这些是:

• 关于Vue 3的基础知识。

• 你应该知道 HTML 表单元素。

• 您应该了解 Vue 3 指令以及如何使用它们。 ## 什么是双向数据绑定?双向数据绑定是一种连接 HTML 表单元素和变量的方法,这样如果一个地方的值发生变化,它也会反映在另一个地方。例如,如果表单元素中的值发生变化,那么存储在变量中的值也会同时自动变化。

它还将更新模板中使用该变量的每个位置的值,以便用户始终看到最新值。

如果我们必须向用户实时显示更改,则此过程非常有用。在 Vue 中, v-model 指令默认使用这种技术。

v-model 如何在 Vue 3 中工作?

如您所知,我们使用 v-model 将变量和表单元素绑定在一起,这样如果您在一个地方更改值,它也会在另一个地方更改。

但是要实现 v-model 到自定义组件,必须知道这个指令在后台是如何工作的。

当我们在输入字段中添加 v-model 时,Vue 会自动在该输入中添加两个幕后内容。

• Vue 将该输入字段的 value 属性与我们在 v-model 中提供的变量绑定。

• Vue 将 JavaScript 输入事件添加到该输入字段,以便每次用户在输入字段中写入或删除某些内容时都会触发该事件。如果您想在 Vue 3 中使用 v-model 自定义组件,这正是您必须做的。

如何将 v-model 添加到自定义组件

要将 v-model 支持添加到组件,您必须执行 v-model 指令对场景后面的输入字段所做的两件事。

• 您必须将该输入字段中的 value 属性与名为 modelValue 的 prop 绑定。您必须将此道具命名为 modelValue,它区分大小写。

• 每次触发输入事件时,您都必须监听输入事件并发出自定义事件。您必须将自定义事件命名为 update:modelValue,它也区分大小写。注意:我将在本文的后面部分向您展示如何为 prop 和自定义事件使用不同的名称。您可以使用任何 HTML 表单元素,例如 input、select、textarea 等。

在 Vue 3 选项 API 中将 v-model 添加到自定义组件

在本节中,我将向您展示如何使用选项 API 将 v-model 应用于自定义组件。

首先,您必须在 Vue 3 项目中创建一个组件。我创建了一个名为 BaseInput.vue 的组件,你可以给任何你想要的名字。

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>Options API</h2>
        <input type="text" :value="modelValue" @input="updateValue" />
    </div>
</template>

<script>
export default {
    props: {
        modelValue: ''
    },
    methods: {
        updateValue(event) {
            this.$emit('update:modelValue', event.target.value);
        }
    }
}
</script>

进入全屏模式 退出全屏模式

在这个组件中,我有一个 HTML 输入字段,我想在其中创建双向数据绑定。

在这里,我必须将输入字段中的 value 属性与 modelValue 属性绑定并发出 udpate:modelValue 事件。

每次输入事件触发时,它都会运行方法 updateValue。 Vue 自动将事件对象传递给此方法。此方法使用用户在输入字段中输入的值发出自定义事件。

现在您可以在任何其他组件中使用此组件并添加 v-model 指令。

<!-- App.vue component -->

<template>
    <base-input v-model="content"></base-input>
</template>

进入全屏模式 退出全屏模式

我在 App.vue 组件中使用了 BaseInput.vue 组件。在这里,App 是父组件,它有一个名为“content”的变量。

每次有人在输入字段中输入内容时,此变量都会存储该值。同样,如果您为此变量设置默认值,该值将显示在输入字段中。

这就是您可以使用选项 API 将 v-model 添加到 Vue 3 中的自定义组件的方式。

在 Vue 3 组合 API 中将 v-model 添加到自定义组件

如果您在组件中使用 Vue 3 组合 API,则可以按照此方法为自定义组件添加 v-model 支持。

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>Composition API</h2>
        <input type="text" :value="modelValue" @input="updateValue" />
    </div>
</template>

<script>
export default {
    props: {
        modelValue: ''
    },

    setup(props, context) {
        const updateValue = (event) => {
            context.emit('update:modelValue', event.target.value);
        }

        return { updateValue }
    }
}
</script>

进入全屏模式 退出全屏模式

在组合 API 中,我们必须使用与选项 API 相同的道具名称并发出相同的事件。

您只需遵循组件中的组合 API 语法。

在这个组件中,我使用了组合 API 所需的 setup() 函数。

<!-- App.vue component -->

<template>
    <base-input v-model="content"></base-input>
</template>

进入全屏模式 退出全屏模式

现在您可以在任何其他组件中使用 BaseInput 组件并将 v-model 指令应用于它。

在 Vue 3 SFC 脚本设置中添加 v-model 到自定义组件

SFC(单文件组件)是最新版本的 Vue 3 中引入的另一种语法。使用这种语法,您可以在组件中编写干净易读的代码。

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>SFC Script Setup</h2>
        <input type="text" :value="modelValue" @input="updateValue" />
    </div>
</template>

<script setup>
const props = defineProps({
    modelValue: String
})

const emit = defineEmits(['update:modelValue'])

const updateValue = (event) => {
    emit('update:modelValue', event.target.value)
}
</script>

进入全屏模式 退出全屏模式

此语法是组合 API 的一部分。但不同的是我们编写它的方式。

在早期版本的 Composition API 中,我们不得不使用 setup() 函数。但在新语法中,您在脚本标签中使用了 setup 这个词。

对于 Props 和 Emits,我们必须使用 Vue 提供的 defineProps() 和 defineEmits()。你甚至不必从 Vue 中导入它们。

您可以看到它比其他两种样式需要更少的代码并且看起来很简单。

除此之外,一切都相似。现在您可以使用 v-model 指令将该组件导入并使用到另一个组件。

<!-- App.vue component -->

<template>
    <base-input v-model="content"></base-input>
</template>

进入全屏模式 退出全屏模式

在组件中自定义 v-model 默认道具和事件名称

到目前为止,我们使用了与 modelValue 相同的 prop 名称和与 update:modelValue 相同的事件名称。但是,如果您想使用不同的名称怎么办。

现在,我将向您展示如何在使用 v-model 自定义组件时为 prop 和 event 使用不同的名称。

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>Custom name for Prop and Event</h2>
        <input type="text" :value="title" @input="updateTitle" />
    </div>
</template>

<script setup>
const props = defineProps({
    title: String
})

const emit = defineEmits(['update:title'])

const updateTitle = (event) => {
    emit('update:title', event.target.value)
}
</script>

进入全屏模式 退出全屏模式

在上面的示例中,我使用 title 作为我添加到 :valueu003d"" 属性的道具名称。

现在,每当用户在输入字段中输入内容时,您都可以发出 update:title 事件。我正在使用更新:标题,因为我的道具名称是标题。如果您使用其他名称,则只需添加该名称并带有前缀 update:。

<!-- App.vue component -->

<template>
    <base-input v-model:title="postTitle"></base-input>
</template>

进入全屏模式 退出全屏模式

当您将 v-model 应用于该组件时,您必须提及您在 BaseInput.vue 组件中使用的道具名称。

Vue 3 中自定义组件中的多个 v-model

在 Vue 2 中,我们只能在组件中使用 v-model 一次。

但是在 Vue 3 中,我们可以同时将多个 v-model 附加到一个组件上。这就是您可以使用多个 v-model 来自定义组件的方式。

<!-- BaseInput.vue component -->

<template>
    <div>
        <h2>Title</h2>
        <input type="text" :value="title" @input="updateTitle" />
        <h2>Content</h2>
        <input type="text" :value="modelValue" @input="updateContent" />
    </div>
</template>

<script setup>
const props = defineProps({
    title: String,
    modelValue: String
})

const emit = defineEmits(['update:title', 'update:modelValue'])

const updateTitle = (event) => {
    emit('update:title', event.target.value)
}

const updateContent = (event) => {
    emit('update:modelValue', event.target.value)
}
</script>

进入全屏模式 退出全屏模式

在上面的示例中,我为一个 v-model 指令使用了自定义道具名称和自定义事件名称。

对于另一个,我将使用默认名称。但是,如果需要,您可以为它们设置自定义名称。

您只需要记住,在您的事件名称中,您将添加带有前缀 update: 的道具名称。

<!-- App.vue component -->

<template>
    <base-input v-model="content" v-model:title="postTitle"></base-input>
</template>

进入全屏模式 退出全屏模式

当你使用 BaseInput.vue 组件时,你必须同时提到两个 v-model 指令。

在这种情况下,您将使用一个 v-model 附加自定义道具名称。对于默认名称,您无需添加任何内容。

结论

我已经向您展示了将 v-model 指令应用于 Vue 3 组件的最佳方法。您已学会使用选项 API、组合 API 和 SFC 脚本设置来执行此操作。

无论您遵循什么语法来创建组件,现在我们都可以在 Vue 3 项目中使用 v-model 来构建组件。