如何将 URL 引用到 Vue.Component.Template 中 [英] how to reference URL into Vue.Component.Template

问题描述

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

How to refer URL into Vue.Template link. Template is longer and all operations are going to include to mounted/methods.

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

推荐答案

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

You could read the local HTML file as a string, and then load the result into the template field. With a module loader (such as Webpack), you would use require() to import the HTML file:

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

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

Alternatively, if vue-loader is available to your project, you could use single file components, which allow importing the template from an external file:

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

演示

这篇关于如何将 URL 引用到 Vue.Component.Template 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！