Wie HTML-Inhalt der Komponente in vue js

Question

Ich habe eine HTML-Vorlage wie unten

AdvanceTemplatePage.vue

<template> 
    <div class="content edit-page management"> 
     <md-card class="page-card"> 
      <md-card-header class="page-card-header"> 
       <md-card-header-text class="page-title"> 
        <div class="md-title">{{ 'AdvanceDetail' | translate }}</div> 
       </md-card-header-text> 
      </md-card-header> 

      <md-card-content class="page-content"> 
       <div class="info-container"> 
        <div class="label">{{ 'AdvanceStatus' | translate }}</div> 
        <div class="value">{{ '@AdvanceStatus' }}</div> 
       </div> 

       <div class="info-container"> 
        <div class="label">{{ 'Amount' | translate }}</div> 
        <div class="value">{{ '@Amount' }} {{ '@Currency' }}</div> 
       </div> 

       <div class="info-container"> 
        <div class="label">{{ 'RefundStartingAt' | translate }}</div> 
        <div class="value">{{ '@RefundStartingAt' }}</div> 
       </div> 

       <div class="info-container"> 
        <div class="label">{{ 'RefundInstallmentQuantity' | translate }}</div> 
        <div class="value">{{ '@RefundInstallmentQuantity' }}</div> 
       </div> 

       <div class="info-container"> 
        <div class="label">{{ 'Description' | translate }}</div> 
        <div class="value">{{ '@Description' }}</div> 
       </div> 
      </md-card-content> 

     </md-card> 
    </div> 
</template> 

Ich muss für den Zugriff auf diese Vorlage html von einer anderen Seite zu bekommen.

Ich versuche, HTML auf eine andere Seite zugreifen, aber ich weiß nicht, wie es geht.

import AdvanceTemplatePage from 'pages/print/template/AdvanceTemplatePage.vue'; 

methods: { 
    onPrint() { 
     const vm = this; 
     const template = new AdvanceTemplatePage({ el: '#templateDiv' }) 
    } 
} 

Wie kann ich html Informationen von einer anderen Seite in vue.js

Jede Hilfe appreciated.THANKS sein wird.

Answer 1

Die Vorlage wird zu einer Renderfunktion kompiliert, damit Ihr Code nicht funktioniert. Und im Grunde können Sie nicht die ursprüngliche HTML-Vorlage erhalten.

Ich bin mir nicht sicher, was Sie versuchen zu tun. Wenn Sie den Quellvorlageninhalt abrufen möchten, besteht die einfachste Möglichkeit darin, die Vorlage in einer Variablen zu speichern, damit Sie sie später erneut abrufen können.

Beachten Sie, dass .vue nicht genannt Exporte unterstützt, so dass Sie diese in einem anderen .js Datei setzen müssen:

export const templateOfAdvanceTemplatePage = ` 
    <div class="content edit-page management"> 
    <md-card class="page-card"> 
    ... 
    </md-card> 
    </div> 
` 

und in Ihrem AdvanceTemplatePage.vue

import templateOfAdvanceTemplatePage from 'path/to/templateOfAdvanceTemplatePage.js' 

export default { 
    template: templateOfAdvanceTemplatePage, 
    ... 
} 

Jetzt können Sie einfach templateOfAdvanceTemplatePage importieren überall wollen, da es nur eine Variable ist.

Wenn Sie die kompilierte HTML anstelle der Quellvorlage möchten, fand ich einen kniffligen Weg zu erreichen. Einfach die Komponente machen und innerHTML die HTML zu erhalten verwenden:

in einer anderen Komponente, machen Sie aber es verstecken, ist es auch ein ref geben:

<template> 
    ... 
    <advance-template-page v-show="false" ref="foo"></advance-template-page> 
    ... 
</template> 

jetzt können Sie den HTML-Inhalt in Ihre Methoden erhalten:

onPrint() { 
    const template = this.$refs.foo.$el.innerHTML 
}