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

Question

我正在使用Laravel 8和inertijs (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

引用我想提取的DivAND如:

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

第一次它工作，但当我改变一个组件(我去另一个值)，它不工作，所以我必须刷新页面。

我控制台记录prop (this.area)$refs.content在ExportPdr组件内=>这是未定义的。我认为这是因为这个组件是在$refs之前安装的。内容在父元素中初始化(如果我可以这么说的话)

我找到了一个解决方案，但在我看来，它并不完美。因为我需要添加v-if在每个父组件的ExportPdf组件中，并在父组件的mounted方法中将布尔值设置为true。这解决了这个问题，道具不再是Undefined了。这一切都是为了使其工作，而无需每次刷新页面。但是每次为每个父组件添加这些行是很繁琐的。

像这样:父模板:

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

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

那么，有什么好建议吗?

谢谢。

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