递归组件:
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name
选项来做这件事:
name: 'unique-name-of-my-component'
当你使用 Vue.component
全局注册一个组件时,这个全局的 ID 会自动设置为该组件的 name
选项。
Vue.component('unique-name-of-my-component', {
// ...
})
模板定义的替代品:
1、内联模板
当 inline-template
这个特殊的 attribute 出现在一个子组件上时,这个组件将会使用其里面的内容作为模板,而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
内联模板需要定义在 Vue 所属的 DOM 元素内。
2、X-template
另一个定义模板的方式是在一个 <script>
元素中,并为其带上 text/x-template
的类型,然后通过一个 id 将模板引用过去。例如:
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
x-template 需要定义在 Vue 所属的 DOM 元素外。