Vue自定义组件实现v-model双向绑定

核心点：
1.父组件啥也不用干只需要绑定v-model值
2.子组件接收绑定的props属性必须为value
3.子组件data中必须定义一个属性接收value的值
4.子组件watch监听value的值同步给定义的属性
5.子组件watch监听定义属性的值通过$emit('input')同步给父组件

父组件

<template>
	<div>
		<p>父组件当前的值：{{num}}</p>
	    <button @click="btnClick">减少</button> 
	    <child v-modal="num" />
	</div>
</template>

<script>
import Child from './child.vue';
export default {
	name: 'parent',
	components: {
		Child 
	},
    data() {
        return { num: 0 };
    },
    methods: {
        btnClick() {
            this.num--;
        },
    },
};
</script>

子组件

<template>
	<div>
		<p>子组件当前的值：{{num}}</p>
    	<button @click="btnClick">增加</button> 
    </div>
</template>

<script>
export default {
	name: 'child',
    props: {
        value: Number,
    },
    data() {
        return { num: 0 };
    },
    watch: {
        value: {
	      handler(val) {
	        this.num = val;
	      },
	      immediate: true,
	    },
        num(num) {
            this.$emit('input', num);
        },
    },
    methods: {
        btnClick() {
            this.num++;
        },
    },
};
</script>