大家的v-model可能通常使用的都是用在input或者textarea这种文本框上,可能我们在组件上使用很少用到,接下来我给大家举个例子如下:
1、父组件
//v-model
<template>
<div class="no_study_report">
<p>{{ name }}</p>
<test-demo-vmodel v-model="name" />
</div>
</template>
<script>
import testDemoVmodel from "@/components/testDemoVmodel";
export default {
name: "noStudyReport",
components: {
testDemoVmodel,
},
data() {
return {
name: "我是阿鑫",
};
},
};
</script>
<style scoped lang="scss">
.no_study_report {
font-size: 30px;
}
</style>
2、子组件
<template>
<input
type="text"
:value="text"
@input="$emit('change', $event.target.value)"
/>
</template>
<script>
export default {
model: {
prop: "text",
event: "change",
},
props: {
text: String,
default() {
return "";
},
},
};
</script>
<style scoped lang="scss"></style>