0
点赞
收藏
分享

微信扫一扫

项目评论部分

DYBOY 2022-03-17 阅读 37

1.通过props的defalut属性巧妙的解决type是a或c的问题

type: {
      type: String,
      // 自定义 Prop 数据验证
      validator (value) {
        return ['a', 'c'].includes(value)
      },
      default: 'a'
    }  

如果是文章评论的话,父组件不需要向子组件传type,此时默认type是a,

如果是回复评论,父组件需要向子组件传type为c,

2.toString()解决数字过大导致超出Js安全范围的问题

javaScript 能够准确表示的整数范围在-2^53到 2^53之间,超过这个范围,无法精确表示这个值。

需要toString才能正确传值

3.回复列表内容不更新问题

原因: 弹层渲染出来以后就只是简单的切换显示和隐藏,里面的内容也不再重新渲染了,所以会导致我们的评论的回复列表不会动态更新了。解决办法就是在每次弹层显示的时候重新渲染组件。

用v-for来控制组件的销毁和重新生成,

4.依赖注入

祖先组件配置provide属性,向所有后代组件提供传值服务

后代组件可通过inject注入来接收祖先组件的provide的值

// 祖先组件----------------------
// 给所有的后代组件提供数据
// 注意:不要滥用
provide: function () {
    return {
        articleId: this.articleId  // 或者写成 this.$route.params.articleId  也可以
    }
}

// 后代组件-------------------------
// inject:['articleId']
inject: {
    articleId: {
        type: [Number, String, Object],
        default: null
    }
}











 






 

举报

相关推荐

0 条评论