一、v-model要解决的问题
在使用自定义组件时，我们有时候需要使用 v-model 来双向绑定。
二、默认使用
在vue中，v-model 的值相当于默认传递了一个名为 value 的 prop 和一个名为 input 的方法（注意，这个value的prop是需要在自定义组件内声明的），如下：
<template>
<div>
<p><a @click="click()">add</a></p>
<p>CTnum: {
{ num }}</p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
value: {
type: Number,
default: 0,
},
},
data() {
return {
num: this.value,
};
},
mounted() {
},
methods: {
click() {
this.num++;
this.$emit("input", this.num);
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT v-model="num"></CT>
<p>BTnum: {
{ num }}</p>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
num: 0,
};
},
mounted() {
},
methods: {
},
};
</script>
三、自定义使用
默认使用时，事件名input 和 prop名value是固定的，如果需要修改，就需要在子组件使用 model 选项。如下：
<template>
<div>
<p><a @click="click()">add</a></p>
<p>CTnum: {
{ num }}</p>
</div>
</template>
<script>
export default {
name: "CT",
model: {
prop: 'modelvalue',
event: 'change'
},
props: {
modelvalue: {
type: Number,
default: 0,
},
},
data() {
return {
num: this.modelvalue,
};
},
mounted() {
},
methods: {
click() {
this.num++;
this.$emit("change", this.num);
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT v-model="num"></CT>
<p>BTnum: {
{ num }}</p>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
num: 0,
};
},
mounted() {
},
methods: {
},
};
</script>