vue组件使用v-model数据双向绑定

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>