如何獲得在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

回答

相關問題