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

我有一个html模板如下

AdvanceTemplatePage.vue

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

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

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

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

如何从vue.js中的另一个页面获取html信息

任何帮助将不胜感激.谢谢.

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

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

请注意,.vue它不支持命名导出,因此您需要将其放在另一个.js文件中:

export const templateOfAdvanceTemplatePage = `
  

    
     ...
    
  
`

在你的 AdvanceTemplatePage.vue

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

export default {
  template: templateOfAdvanceTemplatePage,
  ...
}

现在你可以简单地导入templateOfAdvanceTemplatePage你想要的任何地方,因为它只是一个变量.

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

在另一个组件中,你渲染但隐藏它,也给它一个ref:

现在你可以在你的方法中获得html内容:

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

您可以将（文档）添加到您的组件中