先说下vue2中的使用，再说下vue3中的使用
V2
单个v-model绑定
下面这个单个v-model中，默认是向子组件传递的value属性，子组件接受value获取到父组件的值，通过$emit发送input事件更新该值。也可以通过配置model修改接受的字段名称和事件名称，具体看如下代码
父组件示例：
<template> <div class="mytest"> <div>父组件的name：{{ name }}</div> <Child v-model="name" /> </div> </template> <script> import Child from './child.vue' export default { data() { return { name: 'WFT' } }, components: { Child } } </script>
子组件示例：
<template> <div class="child"> <div>我是子组件</div> <el-input v-model="name" placeholder="请输入内容"></el-input> </div> </template> <script> export default { model: { prop: 'value', // 默认就是value event: 'input' // 默认就是input }, props: { value: { type: String, default: '' } }, computed: { name: { get() { return this.value }, set(val) { this.$emit('input', val) } } } } </script>
多个v-model绑定
多个v-model绑定，通过.sync传递，子组件可以通过传递的对应名称接受、通过$emit发送update:名称的事件方式更新对应的父组件中的值
父组件示例：
<template> <div class="mytest"> <div>父组件的name：{{ name }}</div> <div>父组件的age：{{ age }}</div> <Child :name.sync="name" :age.sync="age" /> </div> </template> <script> import Child from './child.vue' export default { data() { return { name: 'WFT', age: 18 } }, components: { Child } } </script>
子组件示例：
<template> <div class="child"> <div>我是子组件</div> <el-input v-model="propName" placeholder="请输入内容"></el-input> <el-input v-model.number="propAge" placeholder="请输入内容"></el-input> </div> </template> <script> export default { props: { name: { type: String, default: '' }, age: { type: Number, default: 0 } }, computed: { propName: { get() { return this.name }, set(val) { this.$emit('update:name', val) } }, propAge: { get() { return this.age }, set(val) { this.$emit('update:age', val) } } } } </script>
V3
Vue3中介绍单个v-model绑定和多个v-model绑定中的传统方式和defineModel方式
defineModel是一个新的<script setup>宏，旨在简化支持v-model的组件的实现。它以前在3.3.x中作为实验特性发布，并在3.4.x中逐渐稳定。它现在为使用v-model修饰符提供了更好的支持。无需引入，直接使用即可，同defineProps、defineEmits
单个v-model绑定
传统方式
父组件示例：
<template> <div class="wft-projects"> <div>父组件的name：{{ name }}</div> <Child v-model="name" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import Child from './child.vue' const name = ref('WFT') </script>
子组件示例：
<template> <div class="child"> <h3>我是子组件</h3> <el-input v-model="propName"></el-input> </div> </template> <script setup lang='ts'> import { computed } from 'vue' const props = withDefaults(defineProps<{ modelValue?: string }>(), { modelValue: '哈哈' }) const emits = defineEmits<{ (e: 'update:modelValue', params: string): void }>() const propName = computed({ get() { return props.modelValue }, set(val) { emits('update:modelValue', val) } }) </script>
defineModel
父组件示例：
同传统方式
<template> <div class="wft-projects"> <div>父组件的name：{{ name }}</div> <Child v-model="name" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import Child from './child.vue' const name = ref('WFT') </script>
子组件示例：
<template> <div class="child"> <h3>我是子组件</h3> <el-input v-model="propName"></el-input> </div> </template> <script setup lang='ts'> const propName = defineModel<string>('modelValue', { default: 'default value' }) </script>
使用defineModel真的是简化了太多代码，使用很方便
多个v-model绑定
传统方式
父组件示例：
<template> <div class="wft-projects"> <div>父组件的name：{{ name }}</div> <div>父组件的age：{{ age }}</div> <Child v-model:name="name" v-model:age="age" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import Child from './child.vue' const name = ref('WFT') const age = ref(18) </script>
子组件示例：
<template> <div class="child"> <h3>我是子组件</h3> <el-input v-model="propName"></el-input> <el-input v-model.number="propAge"></el-input> </div> </template> <script setup lang='ts'> import { computed } from 'vue' const props = withDefaults(defineProps<{ name?:string, age?: number }>(), { name: 'default name', age: 0 }) const emits = defineEmits<{ (e: 'update:name', params: string): void (e: 'update:age', params: number): void }>() const propName = computed({ get() { return props.name }, set(val) { emits('update:name', val) } }) const propAge = computed({ get() { return props.age }, set(val) { emits('update:age', val) } }) </script>
defineModel
父组件示例：
同传统方式
<template> <div class="wft-projects"> <div>父组件的name：{{ name }}</div> <div>父组件的age：{{ age }}</div> <Child v-model:name="name" v-model:age="age" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import Child from './child.vue' const name = ref('WFT') const age = ref(18) </script>
子组件示例：
<template> <div class="child"> <h3>我组件</h3> <el-input v-model="propName"></el-input> <el-input v-model.number="propAge"></el-input> </div> </template> <script setup lang='ts'> const propName = defineModel<string>('name', { default: 'default name' }) const propAge = defineModel<number>('age', { default: 0 }) </script>
感觉到有帮助的话就点个赞吧！
————————————————
版权声明：本文为CSDN博主「会说法语的猪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_51431448/article/details/135523213
