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

Question

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

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

Answer 1

可以把 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){
  //
});

但想必用起來會非常彆扭

Answer 2

import xxx from './xxx.vue'

export default{
    install(vue) {
        vue.component('name', xxx)
    }
}

Answer 3

vue结合webpack打包似乎可以，把一个组件的js、css、html全部写在一个文件里面。vue文档中，构建大型程序那一节有

Answer 4

那你将head.html 作为组件 你现在的child组件作为head.html父组件 可行吗？ 可能我理解错了= =
webpack 可以去学一下 我也最近刚学 蛮有用的 结合vue.js

Answer 5

http://cn.vuejs.org/guide/mixins.html

---

// 定义一个混合对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个组件，使用这个混合对象
var Component = Vue.extend({
  template: 'your_head_html',
  mixins: [myMixin]
})

var component = new Component() // -> "hello from mixin!"

---

https://segmentfault.com/a/1190000004174940

Answer 6

楼主，找到好办法了吗