如何在vue js中獲取組件的html內容

Question

我有一個html模板如下

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>

我需要從另一個頁面訪問這個模板 html。

我正在嘗試在另一個頁面上訪問這樣的 html，但我不知道該怎么做。

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

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

如何從 vue.js 中的另一個頁面獲取 html 信息

任何幫助將不勝感激。謝謝。

Answer 1

該模板將被編譯為渲染函數，因此您的代碼將無法工作。 而且基本上你不能得到原始的 html 模板。

我不確定您要做什么。 如果您想獲取源模板內容，最簡單的方法是將模板保存在一個變量中，以便您將來可以引用它。

請注意， .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> （文檔）添加到您的組件中