Question

我有一个html模板，如下所示

AdvanceTemplatePage.vue

iex(6)> trunc(123.123)
123

我需要从另一个页面访问此模板html。

我试图在另一个页面上访问这样的html，但我不知道该怎么做。

<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>

如何从vue.js中的其他页面获取html信息

任何帮助都将不胜感激。谢谢。

Answer 1

模板将被编译为渲染函数，因此您的代码将无法正常工作。基本上你无法获得原始的html模板。

我不确定你要做什么。如果您想获取源模板内容，最简单的方法是将模板保存在变量中，以便将来可以参考它。

请注意，onClick不支持命名导出，因此您需要将其放在另一个.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, ... }，因为它只是一个变量。

如果你想要编译的html而不是源模板，我发现了一个棘手的方法来实现。只需渲染组件并使用templateOfAdvanceTemplatePage获取html：

在另一个组件中，您渲染但隐藏它，也给它一个innerHTML：

ref

现在您可以在方法中获取html内容：

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

Answer 2

您只需将<slot></slot>添加到您的组件中

如何在vue js中获取组件的html内容

2 个答案: