如何仅在父组件完全挂载时挂载 vue js 子组件-我正在使用 $refs

Posted 2023-02-16

【中文标题】如何仅在父组件完全挂载时挂载 vue js 子组件-我正在使用 $refs

【英文标题】：How to mount a vue js child component only when the parent is fully mounted - I'am using $refs

【发布时间】：2021-10-28 14:25:30

【问题描述】：

我正在使用 Laravel 8 和 InertiaJS (Vue js)

我正在使用 html2pdf.js 来生成 PDF。所以我为此创建了一个组件：ExportPdf.vue

所以这里是组件ExportPdf.vue的代码：

<template>
  <div>
      <button class="px-6 py-3 rounded bg-gray-600 hover:bg-gray-900 text-white text-sm font-bold whitespace-no-wrap" 
        @click="exportToPDF">Expot to PDF
    </button>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js'

export default 
props:
    area: HTMLDivElement,
    name : String,
    orientation : 
      type: String,
      default()
        return 'landscape'
      
    
,
methods:
     exportToPDF () 
          html2pdf(this.area, 
            margin: [1.5, 1],
            filename: this.name + '.pdf',
            image:  type: 'jpeg', quality: 0.98 ,
            html2canvas: scale: 2,
            jsPDF:  unit: 'cm', format: 'a4', orientation: this.orientation ,  floatPrecision: 16 
        )
    


</script>

然后我在任何我想将内容提取到 PDF 文件中的组件中使用这个组件，如下所示：

<export-pdf  name="file name" :area="$refs.content" />

我引用了我想使用 ref 提取的 Div，例如：

<div ref="content">
 <!-- Content to Extrat into PDF -->
</div>

第一次它可以工作，但是当我更改一个组件时（我转到另一个 vue），它不起作用，所以我必须刷新页面。

我控制台记录了 ExportPdr 组件内的道具（this.area，它从父级接收 $refs.content）=> 它未定义。 我认为这是因为这个组件是在 $refs.content 在父级中初始化之前安装的（如果我可以这么说的话）

我找到了解决方案，但我认为它并不完美。因为我需要在每个父组件中将 v-if 添加到 ExportPdf 组件，并在父组件的安装方法中将布尔值设置为 true。这解决了问题，道具不再是未定义的。这就是让它在不每次都刷新页面的情况下工作。但是每次都将这些行添加到每个父组件是很乏味的。

像这样： 父模板：

<export-pdf v-if="isMounted" name="Liste des consommables des équipements" :area="$refs.content" />

data()
    return 
      isMounted : false,
    
 , 
mounted()
        this.isMounted = true

那么有什么建议让它变得更好吗？

谢谢。

【问题讨论】：

也许你可以用手表听一个var来挂载孩子。

【参考方案1】：

因为

子组件在父组件之前挂载。 $refs 不是反应性的，您应该避免从模板或计算属性中访问 $refs。

解决方案 1：

    <div ref="content">
     <!-- Content to Extrat into PDF -->
    </div>
    <export-pdf  name="Liste des consommables des équipements" :area="refElement" />

<script>
export default 
    data()
        return 
          refElement: ,
        
     , 
    mounted()
        this.refElement = this.$refs.content
    

</script>

解决方案 2：

父母：

 <div ref="content">
 <!-- Content to Extrat into PDF -->
 </div>
 <export-pdf  name="Liste des consommables des équipements" areaRefName="content" />

孩子们：

props:
    areaRefName: String,
    name : String,
    orientation : 
      type: String,
      default()
        return 'landscape'
      
    
,
methods:
     exportToPDF () 
          let element = this.$parent.$refs[this.areaRefName]
          html2pdf(element , 
            margin: [1.5, 1],
            filename: this.name + '.pdf',
            image:  type: 'jpeg', quality: 0.98 ,
            html2canvas: scale: 2,
            jsPDF:  unit: 'cm', format: 'a4', orientation: this.orientation ,  floatPrecision: 16 
        )
    

【讨论】：

我使用了第二个解决方案，它工作正常，只是在子组件方法“this.area”中添加一个小细节，而不是仅区域 html2pdf(this.$parent.$refs[this. area], ...... 也许有人尝试第一个解决方案并确认它。谢谢