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

本文介绍了如何将 URL 引用到 Vue.Component.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.
})

解决方案

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')
})

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" />

demo

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