项目心得六

关注用户思路：

• 给按钮注册点击事件
• 在事件处理函数中
  • 如果已关注，则取消关注
  • 如果没有关注，则添加关注

功能处理思路：

• 找到数据接口
• 封装请求方法
• 请求调用
• 视图更新

给<van-button></van-button>设置loading属性：

1. 交互反馈
2. 防止网络慢用户多次点击按钮导致重复触发点击事件

<van-button
    ...
    :loading="followLoading">已关注</van-button>
<van-button
...
    :loading="followLoading">关注</van-button>

data(){
    return{
        // 其他变量 ...
        followLoading:false  // 控制是否处于载中
    }
}

v-model在组件上的用法：

$event用来接收子组件传过来的值；

 <!-- 评论区域 -->
<commentList :articleId='article.art_id' @commentTotalCount='TotalCount = $event'></commentList>
 <!-- 评论区域 -->
------------------------------------------------------------------------------------
 // 传出评论总数
this.$emit("commentTotalCount", data.data.total_count);

在使用组件的同一个变量既要传递数据又需要修改数据：

传递props:
:is-followed = 'article.is_followed'
修改：自定义事件
@updateFollow='article.is_followed = $event'

可以使用简化的方式 v-model
传递props:
:value='article.is_followed'
修改：内置封装 input
@input='article.is_followed = $event'

当一个组件上面同时有value属性和input自定义事件的时候，且操作的是同一个变量，
即可使用v-model来简化

<follow-user 
   class="follow-btn"
   :user-id="article.aut_id" 
   v-model="article.is_followed"   
/>
-------------------------------------
  props: {
    // 是否关注了
    //isFollowed: {
    value:{  // <==== 【1.修改名称为value】
      type: Boolean,
      required: true
    },
  },

v-model的名称问题，默认是自定义属性value 和 自定义事件input，但是这个名称不太语义化！可以用更加语义化的名称来实现v-model同样的效果:

export default {
  name: 'CollectArticle',
  // 配置 v-model 对应的自定义属性名和自定义事件名称  
  model:{
      prop:'isCollected',
      event:'updateCollect'
  }
}