Vue 组件上使用 v-model

Happier2024年9月25日...大约 3 分钟

基本用法

在子组件中使用 defineModel()，在父组件中的子组件上使用 v-model 绑定，此时 defineModel() 返回的值将和 v-model 绑定的值进行双向绑定

单文件组件

<!-- App.vue -->
<template>
  {{ studentName }}
  <Student v-model="studentName"></Student>
</template>

<script setup>
import Student from './components/Student.vue'
import { ref } from 'vue'
const studentName = ref('John')
</script>

<!-- Student.vue -->
<template>
    <input type="text" v-model="name">
</template>

<script setup>
const name = defineModel()
</script>

HTML

defineModel() 只能用在 <script setup> 上，如想实现相同的效果，可以看下面底层原理部分

底层原理

defineModel() 实际上是使用了 props 和自定义事件实现的

单文件组件

<!-- App.vue -->
<template>
  {{ studentName }}
  <Student :name="studentName" @update-name="$event => studentName = $event"></Student>
</template>

<script setup>
import Student from './components/Student.vue'
import { ref } from 'vue'
const studentName = ref('John')
</script>

<!-- Student.vue -->
<template>
    <input type="text" :value="name" @input="$emit('updateName', $event.target.value)">
</template>
<script setup>
const props = defineProps(['name'])
const emit = defineEmits(['updateName'])
</script>

HTML

defineModel() 只能用在 <script setup> 上，如想实现相同的效果，请参考以下代码

<body>
    <div id="app">
        {{ studentName }}
        <Student :name="studentName" @update-name="$event => studentName = $event"></Student>
    </div>
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        import Student from './Student.js'
        createApp({
            components: {
                Student
            },
            setup() {
                const studentName = ref('John')
                return {
                    studentName
                }
            }
        }).mount('#app')
    </script>
</body>

// Student.js
export default {
    props: ['name'],
    emits: ['updateName'],
    setup() {
        return {
        }
    },
    template: `
        <input type="text" :value="name" @input = "$emit('updateName', $event.target.value)">`
}

因为 defineModel() 声明了一个 prop，我们可以给它传递选项，来声明底层 prop 的选项

多个 v-model 绑定

通过给 v-model 添加参数，可以绑定多个 v-model

在子组件中使用 defineModel(参数名, 选项)，在父组件中的子组件上使用 v-model:参数名 绑定

单文件组件

<!-- App.vue -->
<template>
  {{ studentName }}
  {{ studentAge }}
  <Student v-model:name="studentName" v-model:age="studentAge"></Student>
</template>

<script setup>
import Student from './components/Student.vue'
import { ref } from 'vue'
const studentName = ref('John')
const studentAge = ref(20)
</script>

<!-- Student.vue -->
<template>
    <input type="text" v-model="name">
    <input type="number" v-model="age">
</template>

<script setup>
const name = defineModel('name')
const age = defineModel('age')
</script>

HTML

defineModel() 只能用在 <script setup> 上，如想实现相同的效果，请参考以下代码

<body>
    <div id="app">
        {{ studentName }}
        {{ studentAge}}
        <Student :name="studentName" @update-name="$event => studentName = $event" :age="studentAge"
            @update-age="$event => studentAge = $event"></Student>
    </div>
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        import Student from './Student.js'
        createApp({
            components: {
                Student
            },
            setup() {
                const studentName = ref('John')
                const studentAge = ref(20)
                return {
                    studentName,
                    studentAge
                }
            }
        }).mount('#app')
    </script>
</body>

// Student.js
export default {
    props: ['name', 'age'],
    emits: ['updateName', 'updateAge'],
    setup() {
        return {
        }
    },
    template: `
        <input type="text" :value="name" @input = "$emit('updateName', $event.target.value)">
        <input type="number" :value="age" @input = "$emit('updateAge', $event.target.value)">`
}

处理 v-model 修饰符

通过解构 defineModel()，可以处理 v-model 的修饰符

为了处理修饰符，我们需要在 defineModel() 选项中传入一个 get 或 set 函数，它将接收 v-model 绑定的值，并返回处理后的值

单文件组件

<!-- App.vue -->
<template>
  {{ studentName }}
  <!-- 一个自定义修饰符 -->
  <Student v-model.capitalize="studentName"></Student>
</template>

<script setup>
import Student from './components/Student.vue'
import { ref } from 'vue'
const studentName = ref('John')
</script>

<!-- Student.vue -->
<template>
    <input type="text" v-model="name">
</template>

<script setup>
// 通过解构赋值获取 v-model 的值和修饰符
const [name, modifiers] = defineModel({
    set(value) {
        if (modifiers.capitalize) {
            // 如果有 capitalize 修饰符，则将首字母大写
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
        return value
    }
})
console.log(modifiers) // { capitalize: true }
</script>

HTML

defineModel() 只能用在 <script setup> 上，如想实现相同的效果，请参考以下代码

<body>
    <div id="app">
        {{ studentName }}
        <Student :name="studentName" :modifiers="{ capitalize:true }" @update-name="$event => studentName = $event">
        </Student>
    </div>
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        import Student from './Student.js'
        createApp({
            components: {
                Student
            },
            setup() {
                const studentName = ref('John')
                return {
                    studentName
                }
            }
        }).mount('#app')
    </script>
</body>

// Student.js
export default {
    props: {
        name: String,
        modifiers: {
            default: () => ({})
        }
    },
    emits: ['updateName'],
    setup(props, ctx) {
        const emitValue = (e) => {
            let value = e.target.value
            if (props.modifiers.capitalize) {
                value = value.charAt(0).toUpperCase() + value.slice(1)
            }
            ctx.emit('updateName', value)
        }
        return {
            emitValue
        }
    },
    template: `
        <input type="text" :value="name" @input = "emitValue">`
}

昵称

邮箱

网址

按正序
按倒序
按热度

Vue 组件上使用 v-model

基本用法

底层原理

多个 v-model 绑定

处理 v-model 修饰符

预览: