$attrs渲染问题

最新推荐文章于 2024-05-27 18:50:00 发布

心若向阳(*￣︶￣)

最新推荐文章于 2024-05-27 18:50:00 发布

阅读量353

点赞数

分类专栏：知识累积个人项目文章标签： attrs vue2.4新增传值方法 vue传值 vue.js

本文链接：https://blog.csdn.net/agua001/article/details/117280316

版权

个人项目同时被 2 个专栏收录

144 篇文章 5 订阅

订阅专栏

知识累积

129 篇文章 3 订阅

订阅专栏

本文探讨了在前端开发中遇到的数据渲染延迟问题，以及两种解决方案。首先介绍了当父组件触发详情弹窗时，数据加载后再显示弹窗的方式，以及其效果。接着提出更优的方案，即在子组件内部请求数据并渲染，减少视觉上的延迟。此外，还建议在数据不频繁变化时使用$attrs传递静态数据。最后强调了前端开发中的性能优化对于用户体验的重要性。

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

1、父组件

HTML
<a-modal
  v-model="showDetail"
  :title="detailTitle"
  @ok="handleDetailOk"
  :width="1200"
>
  <detail
    ref="detail"
    :detailData="detailData"
    :pointTotal="pointTotal"
  >
  </detail>
</a-modal>
JS
// 点击详情
async handleDetail(item) {
  this.pointTotal = 0
  let data = {...item}
  this.detailTitle = data.years + '详情'
  this.showDetail = true
  let res = await this.$http(this.$url.DEVICE_MANAGE_DETAIL, 'get', {
    years: data.years
  })
  if(res.data.code === 0) {
    this.detailData = res.data.data
    this.detailData.forEach(item => {
      this.pointTotal += (item.shouldNum - item.actualNum) * 10
    })
  }
},

2、子组件

<template>
  <div class="monthDetail">
    <a-table
      :columns="columns"
      :dataSource="$attrs.detailData"
      rowKey="id"
      :pagination="false"
    >
      <template slot="changeNum" slot-scope="text">
          <span>0</span>
        </template>
        <template slot="monthPoint" slot-scope="record">
          {{ (record.shouldNum - record.actualNum) * 10 }}
        </template>
    </a-table>
    <div class="pointBox">
      <span>总分: {{$attrs.pointTotal}}</span>
    </div>
  </div>
</template>

3、问题：点击详情，弹窗出现，数据后面才渲染上去，肉眼可见的数据变动

4、解决1：弹窗先显示，再请求（效果一般，不推荐）

父组件
JS
// 点击详情
async handleDetail(item) {
  this.pointTotal = 0
  let data = {...item}
  this.detailTitle = data.years + '详情'
  this.showDetail = await true
  let res = await this.$http(this.$url.DEVICE_MANAGE_DETAIL, 'get', {
    years: data.years
  })
  if(res.data.code === 0) {
    this.detailData = res.data.data
    this.detailData.forEach(item => {
      this.pointTotal += (item.shouldNum - item.actualNum) * 10
    })
  }
},