问题
父组件中
<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接收