vue.js - vue组件可以引用一个模板文件吗

问题描述

问 题

    Vue.component('app-header', {
        template: '<div>A custom component!</div>'
    })

这里的div是写在这里的
可以引用一个head.html文件吗
实现代码重用
具体如何使用
谢谢，打扰了

解决方案

可以把 template 提取出來，例如：

<script type="text/x-template" id="head-template">
  <div class="head">
    <h1>{{ title }}</h1>
  </div>
</script>

Vue.component('app-header', {
    template: '#head-template',
    data: {
        title: '我是頭部'
    }
})

針對評論補充

如果是這樣真的還是建議使用 vue-loader 或是 vueify，現在還感覺不出來，如果在寫多點功能或用到組件時會綁手綁腳，而且現在有官方推出的 vue-cli 工具，基本上不用寫任何額外代碼，選選項就可以建構出一個很完整的環境，

vue-cli

<template>
  <div class="header">
    <h1> {{ title }} </h1>
  </div>
</template>

<script>
  export defualt {
    data: function() {
      return {
        title: '我是頭部'
      }
    }
  }
</script>

<style>
  .header {
    color: red;
  }
</style>

如果真的真的真的要用外部引用方式的話，可以用 jquery 的 get ：

$.get("head.html", function(html){
  //
});

但想必用起來會非常彆扭

这篇关于vue.js - vue组件可以引用一个模板文件吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！