vue2中，父子组件通信时，当传递给子组件的数据既要使用还要修改，可以用v-model简写

问题

父组件中

<FollowUser 
	:user-id="article.aut_id" 
	:is-followed="article.is_followed"
	class="follow-btn" 
	@update-is_followed="article.is_followed = $event"
></FollowUser>

子组件中

props: {
  isFollowed: {
    type: Boolean,
    required: true
  },
  userId: {
    type: [Number, String, Object],
    required: true
  }
}

// 在methods方法中，触发自定义事件
this.$emit('update-is_followed', !this.isFollowed)

当我们传递给子组件的数据既要使用还要修改（传递：props :is-followed=“article.is_followed”； 修改：自定义事件 @update-is_followed=“article.is_followed = $event”），利用自定义事件和自定义属性就有些麻烦

解决

简写方式： 在父组件上使用 v-model简化以上代码，实际上就相当于下面两行代码

:value="article.is_followed"
@input="article.is_followed=$event"

简化后父组件

<FollowUser :user-id="article.aut_id" class="follow-btn" v-model="article.is_followed"></FollowUser>

这样子组件中就需要将自定义属性的名字修改为value，自定义事件名字修改为input。这样命名显然不太好，如果需要修改v-model规则名称，可以通过子组件的model属性来配置修改，如下代码，

// 自定义v-model的数据名称
model: {
  prop: 'isFollowed',  // 默认为value
  event: 'update-is_followed' // 默认为input
},

但是一个组件只能使用一次v-model，如果有多个数据需要实现类似于 v-model 的效果，可以使用属性的 .sync的修饰符

代码中的小知识点

• 模板中的$event是事件参数
• 关于prop的大小写问题，HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这样在父组件中传的user-id值，在子组件中可以使用userId接收