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

Question

我正在使用 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" />

我参考了 Div 我想使用 ref 进行提取，例如：

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

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

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

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

像这样： 父模板：

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

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

所以有什么建议可以让它变得更好吗？

谢谢。

Answer 1

因为

child 组件安装在 parent 之前。
$refs 不是反应性的，你应该避免从模板或计算属性中访问 $refs。

解决方案一：

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

方案二：

parent:

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

child仁:

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

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

How to mount a vue js child component only when the parent is fully mounted - I'am using $refs

javascript

inertiajs

laravel

vue.js

vuejs2