父子组件的双向数据绑定

一、使用v-model

v-model的实质

<子组件 v-model="num" />
等同于
<子组件 v-bind:value="num" @input="num = $event" />

子组件配置v-model

props: ['value']
this.$emit('input', 值)

 model: { // 配置修改v-model的默认接收名称
 prop: 'isFollowed', // 默认是 value
 event: 'update-is_followed' // 默认是 input
 }

二、.sync修饰符

本质：

<子组件 :show.sync="show" />
等同于
<子组件 :show="show" @update:show="show = $event" />

子组件内使用.sync修饰的变量

props: ['show']
this.$emit('update:show', 值)

v-model和.sync修饰符的区别

v-model一个组件只能使用一次，.sync修饰符可使用多次