vue自定义组件 v-model
官方解释:v-model指令其实是下面的语法糖包装而成:<input:value="something"@:input="something = $event.target.value">因此,对于一个带有v-model的组件,它应该如下:接收一个valueprop触发input事件,并传入新值利用 $emit 触发 input ...
·
官方解释:
v-model指令其实是下面的语法糖包装而成:
<input
:value="something"
@:input="something = $event.target.value">
因此,对于一个带有 v-model
的组件,它应该如下:
- 接收一个
value
prop - 触发
input
事件,并传入新值
利用 $emit 触发 input 事件:
this.$emit('input', value);
实例:
// 组件定义
Vue.component("my-counter", {
template: `<div>
<h1>{{value}}</h1>
<button @click="plus">+</button>
<button @click="minu">-</button>
</div>`,
props: {
value: Number //接收一个 value 类型是Number
}
methods: {
plus() {
let val = this.value
val++
this.$emit('input', val) //触发 input 事件,并传入新值
},
minu() {
let val = this.value
if(val>0){
val--
this.$emit('input', val) //触发 input 事件,并传入新值
}
}
}
});
// 组件使用
<my-counter v-model="value"></my-counter>
实例2:
<template>
<div>
<input type="text" :value="value" @input="inputHandle">
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
inputHandle(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
// 组件使用
<i-Input v-model="value"></i-Input>
根据官方解释,你可以在定义组件的时候,改写 传入的prop属性 和 $emit 事件
...
model: {
prop: 'checked',
event: 'change'
},
...
更多推荐
已为社区贡献3条内容
所有评论(0)