Question

我正在一个Vuejs项目中，我在单个文件组件中使用vue-property-decorator，而且我希望能够从外部html（或其他）文件中导入模板。我似乎找不到任何解决方案，并且想知道这是否有可能。有人可以在这里帮助我或提供解决方案吗？

理想情况下，我想这样导入模板：

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
  template: "Header.html"
})
export default class App extends Vue {
  @Prop()
  public msg!: string;
  private test: string = "(green)";
  private classAdded: boolean = false;

  private addClass() {
    this.classAdded = !this.classAdded;
  }
}
</script>

<style lang="scss">
@import "./Header.scss";
</style>

但随后我的控制台输出：

[Vue warn]: Error compiling template:

Component template requires a root element, rather than just text.

1  |  Header.html
   |  ^^^^^^^^^^^

found in

---> <App> at src/components/Header/Header.vue
       <App> at src/App.vue
         <Root>

有人可以帮我解决这个问题吗？

谢谢！

Answer 1

找到了！并非以理想的方式，但是对我有用！事实证明，您可以在src上放置一个<template></template>属性，作为对HTML的引用。就我而言：<template src="./Header.html"></template>

感谢您的思考！

将Vuejs单个文件组件中的模板作为外部HTML文件导入

1 个答案: