如何将URL引用到Vue.Component.Template中

Posted 2021-04-30

如何将URL引用到Vue.Template链接。模板较长，所有操作都包含在已挂载/方法中。

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: './views/templatebutton.html'   //how to refer URL here.
})

答案

您可以将本地HTML文件作为字符串读取，然后将结果加载到template字段中。使用模块加载器（例如Webpack），您可以使用require()导入HTML文件：

// Foo.js
Vue.component('button-counter', {
  template: require('./views/templatebutton.html')
})

或者，如果vue-loader可用于您的项目，则可以使用单个文件组件，这些组件允许从外部文件导入模板：

<!-- Foo.vue -->
<template src="./views/templatebutton.html" />

demo