🙂博主：锅盖哒
🙂文章核心：vue3 v-model的使用
目录
前言
什么是v-model？
基本的v-model用法
自定义组件中的v-model
前言
当涉及到Vue.js 3的前端开发时，v-model是一个不可或缺的工具，它允许你在表单元素和组件之间建立双向数据绑定。在这篇博文中，我们将深入探讨v-model的使用，以及如何在Vue 3中充分发挥其威力。
什么是v-model？
v-model是Vue.js中的一个指令，它用于在表单元素和自定义组件之间创建双向数据绑定。这意味着当表单元素的值发生变化时，数据将自动更新，并且当数据发生变化时，表单元素的值也会相应地更新。
在Vue 3中，你可以使用v-model来处理各种表单元素，如文本框、单选按钮、多选框和下拉列表等。
基本的v-model用法
要使用v-model，首先确保你的Vue实例已经被正确初始化。然后，你可以在模板中的表单元素上使用v-model指令来绑定数据。
<template>
<div>
<input v-model="message" type="text">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
v-model将输入框的值与message属性进行了双向绑定。无论用户在输入框中键入什么，message属性都会自动更新，并且{{ message }}的文本也会实时更新。
自定义组件中的v-model
你还可以在自定义组件中使用v-model。要做到这一点，你需要正确配置组件的props和emits选项。
<template>
<div>
<custom-input v-model="message"></custom-input>
<p>{{ message }}</p>
</div>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput
},
data() {
return {
message: ''
}
}
}
</script>
custom-input组件被绑定到message属性。为了使v-model在自定义组件中生效，custom-input组件必须配置props和emits。
<template>
<input :value="value" @input="$emit('update:value', $event)">
</template>
<script>
export default {
props: ['value']
}
</script>
custom-input组件中的value prop 用于接收父组件中的message属性的值，而$emit('update:value', $event) 确保了当输入框的值发生变化时，父组件的message属性也会更新。
这就是Vue 3中v-model的使用方法。它使前端开发更加高效和便捷，特别是在处理表单元素和自定义组件时。希望这篇博文能帮助你更好地理解和运用v-model来提高你的Vue.js开发技能。
1.在子组件的 <template> 部分，你有一个输入框，通过 :value 属性将其值绑定到子组件内部的 value 属性。
<template>
<input :value="value" />
</template>
2.使用 @input 事件监听输入框的值变化，然后调用 updateValue 方法来更新 value 并触发 update:modelValue 事件，将新的值传递给父组件。
<template>
<input :value="value" @input="updateValue" />
</template>
3.props 中接收名为 modelValue 的属性，这是v-model的默认值。
props: ['modelValue'],4.emits 中定义了一个事件名 update:modelValue，这是v-model的默认事件名。
emits: ['update:modelValue'],5.在 data 中创建一个 value 属性，初始值从 modelValue 中获取。
data() {
return {
value: this.modelValue,
};
},6.updateValue 方法用于更新 value 和触发 update:modelValue 事件，从而实现双向绑定。
methods: {
updateValue(newValue) {
this.value = newValue;
this.$emit('update:modelValue', newValue);
},
},1.在父组件的 <template> 部分，你引入了子组件 <MyComponent> 并使用 v-model 将其与 parentValue 绑定在一起。
<template>
<div>
<MyComponent v-model="parentValue" />
<p>Parent Value: {{ parentValue }}</p>
</div>
</template>2.你还显示了父组件的 parentValue 值，以便你可以看到数据的双向绑定效果。
components: {
MyComponent,
},3.在 data 中初始化了 parentValue。
data() {
return {
parentValue: 'Hello from parent',
};
},
