Question

将组件模板作为内联HTML并不是很容易维护，因此我想从文件中加载它。经过一番谷歌搜索之后，似乎我不得不使用DOMParser()来解析HTML文件并将其结果放入template属性。

我找到了following (old) post，并试图做同样的事情，但这失败了 TypeError: vm.$options.template.charAt is not a function。

这是我到目前为止（使用vue-resource）：

main.js

var asyncComponent = Vue.component('async-component', function (resolve, reject) {
    app.$http.get('./template.html', function(data, status, request){
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

const router = new VueRouter({
    routes: [
        { path: '/async', component: asyncComponent }
    ]
})

const app = new Vue({
    el: '#app',
    router
});

由于不再维护vue-resource，因此我也尝试使用fetch，但这产生了完全相同的错误：

var asyncComponent = Vue.component('asyncComponent', function (resolve, reject) {
    fetch('./module.html')
    .then(response => response.text())
    .then(function(data) {
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

如何使用本机功能从单独的HTML文件加载模板，而不必使用webpack？

Answer 1

template字段应包含原始HTML字符串（不需要DOMParser）。

使用vue-resource：

app.$http.get('./template.html', function(data, status, request) {
  resolve({
    template: data
  });
});

使用axios：

axios.get('./template.html').then(({ data }) => {
  resolve({
    template: data
  }
});

demo

从文件加载组件模板

1 个答案: