在Vue中，v-model是一个非常有用的指令，它可以创建双向绑定，在表单元素和应用状态之间同步数据。
以下是使用v-model的几种情况的示例代码：
- 在组件上使用
v-model：
<template>
<MyComponent v-model="message" />
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
message: ''
};
}
};
</script>
在MyComponent.vue中：
<template>
<input type="text" :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
props: ['value'],
// ...
};
</script>
- 使用插槽时，在插槽内容上使用
v-model：
<template>
<MyComponent v-model="message">
<template v-slot:default="slotProps">
<input v-model="slotProps.modelValue" />
</template>
</MyComponent>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
message: ''
};
}
};
</script>
在MyComponent.vue中：
<template>
<div>
<!-- Pass the modelValue as a prop to the default slot -->
<slot :modelValue="modelValue" />
</div>
</template>
<script>
export default {
props: ['value'],
computed: {
modelValue: {
get() {
return this.value;
},
set(value) {
this.$emit('update:value', value);
}
}
},
// ...
};
</script>
- 在深层组件中传递数据时，使用
v-model：
<template>
<MyComponent v-model="message" />
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
message: ''
};
}
};
</script>
在MyComponent.vue中：
<template>
<ChildComponent v-model="modelValue" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
props: ['value'],
computed: {
modelValue: {
get() {
return this.value;
},
set(value) {
this.$emit('update:value', value);
}
}
},
// ...
};
</script>
- 使用动态组件时，使用
v-model：
<template>
<component :is="currentComponent" v-model="message" />
</template>
<script>
import MyComponent from './MyComponent.vue';
import AnotherComponent from './AnotherComponent.vue';
export default {
data() {
return {
currentComponent: 'my-component',
mess