项目评论部分

最新推荐文章于 2024-10-11 17:39:47 发布

soephin

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量656

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/soephin/article/details/123560604

版权

本文介绍了在Vue.js项目中评论部分遇到的问题及其解决方案。包括利用props的default属性处理type为a或c的情况，使用toString()解决数字精度问题，通过v-for解决回复列表内容不更新的问题，以及依赖注入在组件通信中的应用。

摘要由CSDN通过智能技术生成

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
    }
}