在Vue2中自定义组件可以使用v-model指令,来实现双向绑定,前提条件:
1、接收一个value属性
2、在有新的value时触发intput事件
案例
index.vue
<template>
<div>
total值:{{total}} <br/> <br/>
<testVue v-model="total"></testVue>
</div>
</template>
<script>
import testVue from './testVue'
export default {
data(){
return {
total: 0
}
},
components: {
testVue
}
}
</script>
testVue.vue
<template>
<div>
传入的值: {{value}} <br/>
<button @click="changeVal">改变值</button>
</div>
</template>
<script>
export default {
data(){
return {
counter: 0
}
},
propos: {
// 接收外部通过v-model传入的只,必须是value
value: {}
},
methods: {
changeVal(){
this.$emit('input', this.counter++)
}
}
}
</script>