在 Vue 3 中使用 v-model 自定义组件 自定义组件绑定数据********

https://devpress.csdn.net/vue/632fc951357a883f870c8be2.html

<!-- 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>

 

 

Vue 3 中自定义组件中的多个 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 附加自定义道具名称。对于默认名称,您无需添加任何内容。

 

 

https://devpress.csdn.net/vue/632fc951357a883f870c8be2.html