web-dev-qa-db-fra.com

Comment obtenir le contenu HTML d'un composant dans la vue js

J'ai un modèle HTML comme ci-dessous

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>

J'ai besoin d'accéder à ce modèle HTML à partir d'une autre page.

J'essaie d'accéder à ce genre de HTML sur une autre page, mais je ne sais pas comment le faire.

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

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

Comment puis-je obtenir les informations html d'une autre page dans vue.js

Toute aide sera appréciée, merci.

javascripthtmlprintingvue.js
6
Soner Sevinc

Le modèle sera compilé pour une fonction de rendu afin que votre code ne fonctionne pas. Et fondamentalement, vous ne pouvez pas obtenir le modèle HTML d'origine.

Je ne suis pas sûr de ce que vous essayez de faire. Si vous souhaitez obtenir le contenu du modèle source, le moyen le plus simple consiste à enregistrer le modèle dans une variable afin de pouvoir vous y référer ultérieurement.

Notez que .vue ne prend pas en charge les exportations nommées, vous devez donc placer ceci dans un autre fichier .js:

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

et dans votre AdvanceTemplatePage.vue

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

export default {
  template: templateOfAdvanceTemplatePage,
  ...
}

Maintenant, vous pouvez simplement importer templateOfAdvanceTemplatePage où vous voulez, car il ne s'agit que d'une variable.

Si vous voulez le code HTML compilé au lieu du modèle source, j'ai découvert un moyen délicat de le réaliser. Rendez simplement le composant et utilisez innerHTML pour obtenir le code HTML:

dans un autre composant, vous le rendez mais vous le masquez, lui donnez aussi une ref:

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

maintenant, vous pouvez obtenir le contenu HTML dans vos méthodes:

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

Vous pouvez simplement ajouter <slot></slot> à votre composant

2
98mprice