问题: 在使用自定义组件时,我们有时候需要使用 v-model 来双向绑定。
方法: 在vue中,v-model 的值相当于默认传递了一个名为 value 的 prop 和一个名为 input 的方法(注意,这个value的prop是需要在自定义组件内声明的),如下:
子组件:
<template>
<div class="hello">
<h2>值为:{{value}}</h2>
<button @click="add">加一</button>
</div>
</template>
<script>
export default {
props:{
value:{
type:Number
}
},
methods:{
add(){
this.$emit("input",this.value+1)
}
}
}
</script>
父组件代码:
<template>
<div>
<HelloWorld v-model="test" />
</div>
</template>
<script>
import HelloWorld from './HelloWorld.vue'
export default {
components: {
HelloWorld
},
data(){
return {
test:9
}
},
}
</script>
此时 v-model 的功能就实现了,但是此时的事件名和 prop 名是固定的,如果需要修改,就需要在子组件使用 model 选项。如下:
子组件:
<template>
<div class="hello">
<h2>值为:{{value}}</h2>
<button @click="add">加一</button>
</div>
</template>
<script>
export default {
model:{
prop: 'checked', // 此时就是绑定的checked了,并且这个checked也是需要在props里面声明的
event: 'change'
},
props:{
checked:{
type:Number
}
},
methods:{
add(){
this.$emit("change",this.checked+1)
}
}
}
</script>
父组件代码:
<template>
<div>
<HelloWorld v-model="test" />
</div>
</template>
<script>
import HelloWorld from './HelloWorld.vue'
export default {
components: {
HelloWorld
},
data(){
return {
test:9
}
},
}
</script>
此时就可以自定义我们的prop名和事件名了
官网地址:vue官网