1.表单 v-model
<input v-model="inputValue">
2.组件 v-model
- 父组件
<template>
<button @click="showSon=!showSon">父组件:切换son的状态</button>
<Son v-model="showSon"></Son>
</template>
<script>
export default {
data () {
return {
showSon: false
}
}
}
</script>
- 子组件
<!-- 子组件 -->
<template>
<div style="margin: 100px">
<button @click="$emit('change',!value)">子组件:切换传来的状态</button>
<div>我收到了状态:{{value}}</div>
</div>
</template>
<script>
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: Boolean,
default: false
}
}
}
</script>
3.父组件传进来的 v-model
子组件中进行 v-model
绑定
<template>
<div>
<van-popup v-model="show"></van-popup>
</div>
</template>
<script>
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: Boolean,
default: false
}
},
data () {
return {
show: false,
};
},
watch: {
value: {
handler (val) {
this.show = val
},
immediate: true
},
show: {
handler (val) {
this.$emit('change', val)
},
immediate: true
}
}
}
</script>
<style lang='scss' >
</style>