vue3学习记录-v-model

1.疑问

像那种原生标签，例如input、textarea 及 select上使用v-model，会创建双向数据绑定。那像那种自定义的组件v-model是怎么实现双向绑定的呢。

2 用法

2.1底层原理

一个名为 modelValue 的 prop，本地 ref 的值与其同步；
一个名为 update:modelValue 的事件，当本地 ref 的值发生变更时触发。

//父组件
<script setup>
import A from './components/A.vue';
import { ref } from 'vue';
const countModel = ref(0);
</script>
<template><div class="container"><p>countModel:{{ countModel }}</p><A v-model="countModel"></A><B v-model="countModel1"></B></div>
</template>//子组件
<template>
<input type="text" :value="modelValue" @input="inputChange">
</template>
<script setup>
defineProps({modelValue:String
})
const inputChange =(e) =>{console.log(e.target.value)emit('update:modelValue',e.target.value)
}
const emit = defineEmits(['update:modelValue'])
</script>

父组件中的 v-model=“foo” 将被编译为：

<A
:modelValue=“countModel”
@update:modelValue=“$event => (countModel= $event)”
/>

2.2 多个v-model

Vue 3 允许在一个组件上使用多个 v-model

<!-- CustomForm.vue -->
<script setup>
defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName'])
</script><template><input :value="firstName"@input="$emit('update:firstName', $event.target.value)"/><input :value="lastName"@input="$emit('update:lastName', $event.target.value)"/>
</template>//父组件
<script setup>
import CustomForm from './components/CustomForm.vue';
import { ref } from 'vue';
const firstName = ref('')
const lastName = ref('')
</script>
<template><div class="container"><CustomFormv-model:firstName="firstName"v-model:lastName="lastName"/><p>全名：{{ firstName }} {{ lastName }}</p></div>
</template>

2.3 defineModel()

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：

<!-- Child.vue -->
<script setup>
const model = defineModel()function update() {model.value++
}
</script><template><div><div>Parent bound v-model is: {{ model }}</div><input type="text" v-model="model"><button @click="update">Increment</button></div>
</template>

defineModel的写法input绑定值用的是v-model，单个或则多个v-model和底层原理类似的写法

2.4 自定义修饰符

Vue 3 还允许我们为 v-model 创建自定义修饰符。自定义一个capitalize实现首字母大写.

<script setup>
import B from './components/B.vue';
import { ref } from 'vue';
const countModel = ref('');
</script><template><div class="container"><B v-model.capitalize="countModel"></B></div>
</template><template>
<input type="text" :value="modelValue" @input="inputChange">
</template><script setup>
import { ref, reactive} from 'vue'
const props = defineProps({modelValue:String,modelModifiers:{default: ()=> {}}
})
const inputChange =(e) =>{let value = e.target.valueif (props.modelModifiers.capitalize) {value = value.charAt(0).toUpperCase() + value.slice(1)}emit('update:modelValue',value)
}
const emit = defineEmits(['update:modelValue'])
</script>

3.4之后的写法

<!-- Child.vue -->
<script setup>
const [model, modifiers] = defineModel({set(val){if(modifiers.capitalize){return val.charAt(0).toUpperCase() + val.slice(1)}return val}
})
</script><template><div>Parent bound v-model is: {{ model }}</div><input type="text" v-model="model">
</template>