Vue 中v-model双向绑定的实现

方式一：

定义一个子组件：

命名为child.vue

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

<script>
export default {
	name: 'child',
    props: {
        value: Number,  // 必须要使用value
    },
    data() {
        return { num: 0 };
    },
    watch: {
        value(val) {
            this.num = val;
        },
        num(num) {
            this.$emit('input', num);  // 这儿必须用input 发送数据，发送的数据会被父级v-model=“parent”接收到，再被value=parent传回来。
        },
    },
    methods: {
        btnClick() {
            this.num++;
        },
    },
}

</script>

父组件调用：

<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>{{parentProp}}</p>
       <button @click="changeValue">在子组件内修改prop值</button>
     </ul>
   </div>
</template>

<script>
   export default {
     model: {
         prop: 'parentProp',  // 要和props中的变量对应
         event: 'change'
     },
     props: {
         msg: '',
         parentProp: {
             type: String,
             default: ''
         }
     },
     methods: {
         changeValue() {
             this.$emit('change', this.parentProp++)
         }
     }
   }
</script>  

父组件：

<child v-model="parent"></child>　

关于vue model属性

###　语法

model: { prop?: string, event?: string }

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。