一个组件上的`v-model`默认会利用名为`value`的prop(属性)和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将`value`特性用于不同的目的。这时候我们可以在定义组件的时候，通过设置`model`选项可以用来实现不同的处理方式。
在创建组件的时候，添加`model`属性，其中要包含两个属性配置，分别是：
- event：什么时候触发v-model行为
- prop：定义传递给v-model的那个变量，绑定到哪个属性值上
下面是实现计数器作用的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>vue自定义组件v-model</title>
</head>
<body>
<div id="app">
<Stepper v-model="goodsCount"></Stepper>
</div>
<script>
Vue.component(‘Stepper‘, {
props: [‘count‘],
template: `
<div>
<button @click="sub">-</button>
<span>{{count}}</span>
<button @click="add">+</button>
</div>
`,
model: {
//event:什么时候触发v-model行为
event: ‘change-count‘,
// 定义传递给v-model的那个变量，绑定到哪个属性值上
prop: ‘count‘
},
methods: {
sub() {
// 触发上面model中定义的触发名称
// 这里不需要修改this.count的值，只要把最终的结果传递出去就行
this.$emit("change-count", this.count - 1)
},
add() {
this.$emit("change-count", this.count + 1)
}
}
})
new Vue({
el: "#app",
data: {
goodsCount: 0
}
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/xshan/p/12342509.html
时间： 2024-07-31 03:22:48