一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
举例说明
- 子组件
<template>
<div>
<input type="text" :value="value" v-on:change="changeEvent" />
</div>
</template>
<script>
export default {
props: {
value: String,
},
methods: {
changeEvent(e) {
this.$emit("input", e.target.value);
},
},
};
</script>
<style lang="scss" scoped>
</style>
- 父组件
<Test v-model="name" />
//v-model相当于在组件上绑定了一个名为value的属性和一个input的方法(在input方法中修改属性的值)
<Test value="小明" @input="....."></Test>
...
export default {
components: {
Test,
},
data() {
return {
name: "小明",
};
},
上面是最原始的v-model绑定的本质
如果想更变绑定的属性值和方法名
子组件
<template>
<div>
<input type="text" :value="showName" v-on:change="changeEvent" />
</div>
</template>
<script>
export default {
model: {
prop: "showName", //自定义属性的名字,切记要在props中声明
event: "changeName", //自定义方法名
},
props: {
showName: String,
},
methods: {
changeEvent(e) {
this.$emit("changeName", e.target.value);
},
},
};
</script>
父组件
<Test v-model="name" />
//v-model相当于在组件上绑定了一个名为showName的属性和一个changeName的方法(在changeName方法中修改属性的值)
<Test value="小明" @input="....."></Test>
...
export default {
components: {
Test,
},
data() {
return {
name: "小明",
};
},
