Vue 移动端

文章评论功能

展示文章评论列表

单独封装一个文章评论列表组件, 再封装获取文章评论的请求方法, 获取到数据后再遍历渲染出来

<van-cell v-for="(item,index) in list" :key="index" :title="item.content"></van-cell>

因为默认情况下只有滚动到了评论列表区域才会触发 onLoad 事件，发送请求获取数据，所以我们需要再 created 里面主动触发一次，保证一开始就触发

为了方便复用, 将文章的评论项也封装为一个组件, 导入注册这个组件, 在评论列表中遍历数据

给评论点赞, 先判断用户是否登录, 如未登录, return 出来并提示用户先登录, 如已登录, 再判断用户是否点赞, 已赞就取消, 没赞就点赞, 然后给点赞的变量取反来更新视图

发表文章评论

发表文章的弹出层可使用 vant 中的 Popup 组件

<van-popup v-model="isPostShow" position="bottom">
	测试内容
</van-popup>

• v-model 绑定一个变量来控制弹出层的显示与隐藏
• position 可以控制弹出层从哪个方向弹出
• 当不给弹出层设置高度时, 默认由内容撑开

封装一个发表评论的组件, 方便维护和复用, 再封装请求方法, 注册发布点击事件,

如果发布成功将内容传到评论列表中, 如果失败则提示错误, 再将弹出层关闭

因为发表评论需要文章的id, 通过父传子技术将文章的id 传给子组件

在获取到评论数据后, 要讲数据传递给父组件, 再从父组件传给列表组件 (组件之间如果共享的是一个引用数据类型, 任何一个组件修改,不赋值, 其他都会变化), 即将列表组件中 data 里的变量修改为 props 里的属性来接收数据

评论回复

点击回复评论, 显示弹出层, 封装内容组件, 传递当前点击回复的评论项, 通过父传子来传递给子组件, 子组件的顶部区域通过三元表达式来展示不同的效果

展示评论的回复列表也是复用了之前的列表组件,通过传递不同的 source 来获取不同的数据

Vue 依赖注入

可以在组件之间传递数据

<!-- provide选项允许我们指定我们想要提供给后代组件的数据/方法 -->
provide: () => obj,

<!-- inject可以在任何后代组件使用来接受我们在祖先指定的数据/方法 --> 
inject:{
  obj:{
    type:Object,
    default: null,  // 默认值
  }
}