Question

说，我在Vue中有以下单个文件组件：

// Article.vue

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{body}}</p>
  </div>
</template>

在另一个文件中导入此组件后，是否可以将其模板作为字符串？

import Article from './Article.vue'

const templateString = // Get the template-string of `Article` here.

现在templateString应该包含：

<div>
  <h1>{{title}}</h1>
  <p>{{body}}</p>
</div>

Answer 1

这是不可能的。

Under the hood, Vue compiles the templates into Virtual DOM render functions.

因此，您编译的组件将具有render函数，但无法查看用于生成它的字符串。

Vue is not a string-based templating engine

但是，如果您使用字符串指定模板，this.$options.template将包含字符串。

Answer 2

为您的组件设置ref属性，然后您可以使用this.$refs.ComponentRef.$el.outerHTML获取组件的呈现HTML内容，并记住在创建时不要这样做。

<template>
  <div class="app">
    <Article ref="article" />
  </div>
</template>

<script>
import Article from './Article.vue'
export default {
  name: 'App',
  data() {
    return {
      templateString: ""
    }
  },
  components: {
    Article,
  },
  created() {
    // wrong, $el is not exists then
    // console.log(this.$refs.article.$el.outerHTML)
  },
  mounted() {
    this.templateString = this.$refs.article.$el.outerHTML
  },
}
</script>

在Vue中将模板作为字符串

2 个答案: