How to get html content of a component in vue js

Question

I have an html template as below

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>

I need to access this html template from another page.

I am trying to access html like this on another page, but I don't know how to do it.

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

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

How can I get html information from another page in vue.js

Any help would be appreciated. Thank.

Answer 1

The template will be compiled for the rendering function so that your code does not work. And basically you cannot get the original html template.

, . , , .

, .vue , .js:

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

AdvanceTemplatePage.vue

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

export default {
  template: templateOfAdvanceTemplatePage,
  ...
}

templateOfAdvanceTemplatePage , , .

html , . innerHTML, html:

, , , ref:

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

html :

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

Answer 2

<slot></slot> ()