在Vue中,可以使用v-model指令进行双向数据绑定。v-model可以在表单元素、组件以及自定义组件上使用。下面是一个使用v-model的示例:
<template>
<div>
<label>请输入姓名:</label>
<input type="text" v-model="name">
<p>您输入的姓名是:{{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: ''
}
}
}
</script>
<template>
<div>
<my-component v-model="message"></my-component>
<p>您输入的信息是:{{ message }}</p>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
message: ''
}
}
}
</script>
<template>
<div>
<label>请输入城市名:</label>
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: {
value: String
}
}
</script>
在自定义组件上使用v-model时,需要定义一个名为value的prop用于接收父组件传递的值,并且在组件内部需要使用$input事件触发v-model的更新。