在 Vue.js 中，如果你想在一个自定义组件中使用 v-model 来实现双向数据绑定，你需要遵循一些特定的步骤。v-model 实际上是以下两个属性的语法糖：
- 一个名为
value的 prop，用于接收父组件传递的数据。 - 一个名为
input的事件，当子组件中的值发生变化时触发，并将新的值作为参数传递给该事件。
基本实现
假设你有一个简单的输入框组件 CustomInput，你可以这样来实现 v-model：
子组件 (CustomInput.vue)
<template>
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
</template>
<script>
export default {
props: {
// 定义 value 为必需的 prop
value: {
type: String,
required: true
}
}
}
</script>
在这个例子中，value 是从父组件传入的 prop，而 @input 事件处理器会触发 $emit('input', ...)，将新的值发送回父组件。
父组件
<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>
这里，v-model 绑定了 message 到 CustomInput 组件上。每当用户在输入框中输入内容时，CustomInput 会通过 @input 事件更新 message。
自定义 v-model 的模型名称
如果你不想使用默认的 value 和 input，你可以通过 model 选项来自定义它们：
子组件 (CustomInput.vue) 使用自定义模型
<template>
<input
:value="customValue"
@change="$emit('update:customValue', $event.target.value)"
>
</template>
<script>
export default {
props: {
customValue: {
type: String,
required: true
}
}
}
</script>
父组件
<template>
<div>
<custom-input v-model:customValue="message"></custom-input>
<p>{{ message }}</p>
</div>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput
},
data() {
return {
message: ''
};
}
}
</script>
在这个例子中，我们使用了 v-model:customValue 来指定使用的 prop 名称和事件名称。注意，在子组件中，事件名需要是 update:customPropName 的形式。
以上就是如何在自定义组件中实现 v-model 的方法。通过这种方式，你可以轻松地在任何自定义组件中实现双向数据绑定。
