如何获得在VUE JS

我有一个HTML模板组件的HTML内容如下如何获得在VUE JS

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

任何帮助将是appreciated.Thanks HTML信息。

来源

2017-04-21 Soner Sevinc

是否要访问原始html或呈现的html？ – Cobaltway

实际上我需要他们两个。我会在一些页面上使用一个，另一个在一些页面@Cobaltway –

该模板将被编译为渲染函数，以便您的代码无法工作。基本上你不能得到原始的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 
}

来源

2017-04-21 08:45:10 CodinCat

'this。$ refs.foo。$ el.innerHTML' - 整洁的把戏。谢谢。 – webnoob

如何获得在VUE JS

回答

相关问题