内联模板

在使用组件时，写上特殊的特性：inline-template，就可以直接将里面的内容作为模板而不是被分发的内容（插槽）。

  1. <my-cmp inline-template>
  2.   <div>
  3.     <p>These are compiled as the component's own template.</p>
  4.     <p>Not parent's transclusion content.</p>
  5.   </div>
  6. </my-cmp>

不过，inline-template 会让模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 <template> 元素来定义模板。

X-Template

另一个定义模板的方式是在一个 <script> 元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。例如：

  1. <script 
  2.   type="text/x-template" 
  3.   id="hello-world-template"
  4. >
  5.   <p>Hello hello hello</p>
  6. </script>
  1. Vue.component('hello-world', {
  2.   template: '#hello-world-template'
  3. })

这些可以用于模板特别大的 demo 或极小型的应用，但是其它情况下请避免使用，因为这会将模板和该组件的其它定义分离开。