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 // show 组件
}
}
}
</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: {
// 父组件用v-modal传来的value
value: {
type: Boolean,
default: false
}
}
}
</script>

3.父组件传进来的

v-model

子组件中进行

v-model

绑定

// 子组件
<template>
<div>
// 1.错误：直接用props的value去v-modal (因为vue数据单向流，不能修改父级数据)
// <input v-model="value"></input >

// 2.可以：用input事件去和父级数据双向绑定
//  <input :value="value" @input="$emit('change', $event.target.value)">

// 3.可以：监听状态'show'，改变value `this.$emit('change', val)`
// 监听状态'value'，改变'show'状态
<van-popup v-model="show"></van-popup>
</div>
</template>

<script>
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
// 父组件用v-modal传来的value
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>