v-model是否可以用在组件上
时间: 2023-05-25 13:01:39 浏览: 45
A:是的,可以使用v-model在组件上进行双向数据绑定。在组件中,v-model默认会绑定value属性和input事件。但是需要在组件内部声明props和emit来接收和触发该事件。例如:
```
// 父组件
<template>
<div>
<custom-input v-model="message"></custom-input>
</div>
</template>
<script>
import CustomInput from './CustomInput.vue'
export default {
components: {
CustomInput
},
data() {
return {
message: ''
}
}
}
</script>
// 子组件 CustomInput.vue
<template>
<div>
<input :value="value" @input="$emit('input', $event.target.value)" />
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
```
在上面的例子中,通过使用v-model将父组件中的message属性双向绑定到自定义组件CustomInput中。 CustomInput组件中,使用props将value属性传入组件,再通过$emit方法来向外传递input事件。当子组件触发input事件时,会调用父组件的message进行数据更新。