vue2 自定义组件如何使用v-model
vue2 自定义组件如何使用v-model
·
一、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>
更多推荐
所有评论(0)