v-model 是内置指令,不能用在自定义组件上
时间: 2023-08-11 18:12:18 浏览: 211
这个说法并不完全正确。v-model 是一个语法糖,用于简化表单元素的双向数据绑定。在自定义组件中,你可以使用 props 和 $emit 方法来实现类似的双向数据绑定。
不过,如果你确实想在自定义组件中使用 v-model,你可以通过在组件上定义 model 选项来实现。这个选项包含两个属性,一个是 prop,用于接收父组件中的值,另一个是 event,用于向父组件发送更新后的值。
下面是一个简单的例子:
```html
<template>
<div>
<input :value="value" @input="$emit('update:value', $event.target.value)">
</div>
</template>
<script>
export default {
props: ['value'],
model: {
prop: 'value',
event: 'update:value'
}
}
</script>
```
这个组件中,我们使用 props 接收父组件传入的值,并在 input 元素上绑定了 value 属性和 input 事件。在 input 事件中,我们通过 $emit 方法向父组件发送了更新后的值,并使用 update:value 作为事件名称。在使用这个组件时,你可以像使用原生的 input 元素一样使用 v-model 来进行双向数据绑定:
```html
<template>
<div>
<my-input v-model="message"></my-input>
</div>
</template>
<script>
import MyInput from './MyInput.vue'
export default {
components: {
MyInput
},
data() {
return {
message: 'hello'
}
}
}
</script>
```
这样,当你在 MyInput 组件中输入内容时,父组件中的 message 数据也会同步更新。
阅读全文