高级组件自定义v-model的使用方式

大家的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>