我可以获取 Vue.js 组件作为实例吗？

Question

我尝试获取 Vue.js 组件的模板，因为我需要它用于另一个功能。

首先， 我有一个需要 Vue.js 组件模板的函数，因为我希望模板中的数据能够动态更改，而不仅仅是一些静态 HTML。

其次， 我从 Vue.js 组件获取模板时遇到问题。也许他们不允许这样做，但我不确定。我是 Vue.js 的新手。

但以我对 JS 的理解，或许会发生这种情况。

我试图做这样的事情：

let vmComponent = Vue.component('VueComponent', {
  data() {
    return {
      title: 'I am a Vue.js component manually.'
    }
  },
  template: `
  <div>
    <h2>Template Exchange</h2>
    <h3>{{ title }}</h3>
  </div>`,
});

console.log(vmComponent.template);

我希望在运行 vmComponent.template 时得到 HTML 字符串

如果这种做事方式是不可能的。有没有其他方法可以将 Vue.js 组件模板作为 HTML 字符串。

例如，可能在一个 new.Vue({})

Answer 1

可以通过vmComponent.options.template访问组件模板。

可以将模板声明为字符串以供重用：

export const template = `...`;

const vmComponent = Vue.component('VueComponent', {
  template,
  ...
});

这可能不适用于pre-compiled templates。