什么是组件
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展
使用组件
注册
我们可以通过以下方式创建一个Vue实例：
new Vue({
el: '#some-element',
// 选项
})要注册一个全局组件，可以使用Vue.component(tagName, options)。例如：
Vue.component('my-component', {
// 选项
})对于自定义标签名，Vue.js不强制要求遵循W3C规则(小写，并且包含一个短杠)，尽量遵循这个规则比较好
组件注册后便可以在父实例的模块中以自定义元素的形式使用。要确保在初始化根实例之前注册了组件：
<div id="example">
<my-component></my-component>
</div>
//注册
Vue.component('my-component',{
template:'<div>A custom component!</div>'
})
//创建根实例
new Vue({
el:'#example'
})渲染为：
<div id="example">
<div>A custom component!</div>
</div>局部注册
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：
var Child = {
template:'<div>A custom component!</div>'
}
new Vue({
components:{
// <my-component> 将只在父模板可用
'my-component':Child
}
})这种封装也适用于其它可注册的 Vue 功能，如指令
DOM模板解析说明
当使用DOM作为模版时(例如，将el选项挂载到一个已存在的元素上),你会受到HTML的一些限制，因为Vue只在浏览器解析和标准化HTML后才能获取模版内容。尤其像这些元素<ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 这样的元素只能出现在某些其它元素内部
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：
<table>
<my-row>...</my-row>
</table>自定义组件被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性：
<table>
<tr is="my-row">...</tr>
</table>注意:如果使用来自以下来源之一的字符串模板，这些限制将不适用：
<script type="text/x-template">- JavaScript内联模版字符串
- .vue 组件
因此，有必要的话请使用字符串模版
data必须是函数
通过Vue构造器传入的各种选项大多数都可以在组件里用；data是一个例外，它必须是函数；实际上，如果你这么做：
Vue.component('my-component', {
template: '<span>{{ message }}</span>',
data: {
message: 'hello'
}
})那么Vue会停止并在控制台发出警告，告诉你在组件中data必须是一个函数。理解这种规则的存在意义很有帮助，让我们假设用如下方式来绕开Vue的警告：
<div id="example-2">
<simple-counter></simple-counter>
</div>
<script>
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// 技术上data的确是一个函数了因此Vue不会警告，但我们返回给每个组件的实例却引用了同一个data对象
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
</script>构成组件
组件意味着协同工作，通常父子组件的关系：组件A在它的模版中使用了组件B。它们之间必然需要相互通信:父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而在一个良好定义的接口中尽可能将父子组件解耦是很重要的,这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性
Vue中，父子组件的关系可以总结为props down、events up;父组件通过 props 向下传递数据给子组件，子组件通过events 给父组件发送消息
prop
使用prop传递数据
组件实例的作用域是孤立的，这意味着不能(也不应该)在子组件模板内直接引用父组件数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项
子组件要显式地用props选项声明它期待获得的数据：
Vue.component('child', {
props: ['message'],// 声明 props
// 就像data一样prop可以用在模板内，同样也可以在vm实例中像“this.message”这样使用
template: '<span>{{ message }}</span>'
})然后我们可以这样向它传入一个普通字符串：
<child message="hello!"></child>camelCase vs. kebab-case
HTML特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased(驼峰式)命名的prop需要转换为相对应的 kebab-case (短横线隔开式) 命名：
<script>
Vue.component('child', {
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
</script>
<child my-message="hello!"></child>如果使用字符串模版，则没有这些限制
动态Prop
模板中要动态地绑定父组件的数据到子模板的props，与绑定到任何普通的HTML特性相类似，就是用v-bind。每当父组件的数据变化时，该变化也会传导给子组件：
<div>
<input v-model="parentMsg"><br/>
<child :my-message="parentMsg"></child>
</div>字面量语法 vs 动态语法
初学者常犯的一个错误是使用字面量语法传递数值：
<comp some-prop="1"></comp><!-- 传递了一个字符串 "1" -->因为它是一个字面prop，它的值是字符串"1"而不是number。如果想传递一个实际的number需要用v-bind从而让它的值被当作JS表达式计算：
<comp :some-prop="1"></comp><!-- 传递实际的 number -->单向数据流
prop是单向绑定的：当父组件的属性变化时将传导给子组件，但不会反过来。这是为了防止子组件无意修改了父组件的状态—这会让应用的数据流难以理解。另外，每次父组件更新时子组件的所有prop都会更新为最新值。这意味着不应该在子组件内部改变prop。如果这么做了，Vue会在控制台给出警告
为什么我们会有修改prop中数据的冲动呢？通常是这两种原因：
1.prop作为初始值传入后，子组件想把它当作局部数据来用；
2.prop作为初始值传入，由子组件处理成其它数据输出
对这两种原因，正确的应对方式是：
1.定义一个局部变量，并用prop的值初始化它：
props: ['initialCounter'],
data: function(){
return { counter: this.initialCounter }
}2.定义一个计算属性，处理 prop 的值并返回
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}注意:在JavaScript中对象和数组是引用类型，指向同一个内存空间，如果prop是一个对象或数组，在子组件内部改变它会影响父组件的状态
Prop验证
可以为组件的props指定验证规格。如果传入的数据不符合规格Vue会发出警告。当组件给其他人使用时，这很有用
要指定验证规格，需要用对象的形式，而不能用字符串数组：
Vue.component('example',{
props:{
propA:Number, // 基础类型检测 (`null` 意思是任何类型都可以)
propB:[String,Number], // 多种类型
propC:{ // 必传且是字符串
type:String,
required:true
},
propD:{ // 数字，有默认值
type:Number,
default:100
},
propE:{ //数组/对象的默认值应当由一个工厂函数返回
type:Object,
default:function(){
return { message : 'hello' }
}
},
propF:{ //自定义验证函数
validator:function(value){
return value > 10
}
}
}
})type可以是原生构造器：String、Number、Boolean、Function、Object、Array、Symbol。type也可以是一个自定义构造器函数，使用instanceof 检测
当prop验证失败，Vue会抛出警告(如果使用的是开发版本)。props会在组件实例创建之前进行校验，所以在default或validator函数里，诸如data、computed或methods等实例属性还无法使用
非Prop属性
所谓非prop属性，就是它可以直接传入组件而不需要定义相应的prop。明确给组件定义prop是传参的推荐方式，但组件的作者并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的属性，这些属性都会被添加到组件的根元素上
例如：第三方组件bs-date-input，当它要和一个Bootstrap插件互操作时需要在这个第三方组件的input上添加data-3d-date-picker属性，这时可以把属性直接添加到组件上(不需要事先定义prop)：
<bs-date-input data-3d-date-picker="true"></bs-date-input>添加属性data-3d-date-picker="true" 之后，它会被自动添加到bs-date-input的根元素上
替换/覆盖现有的特性
假定这是bs-date-input的模板：
<input type="date" class="form-control">为了给该日期选择器插件增加一个特殊的主题，我们可能需要增加一个特殊的class，比如：
<bs-date-input data-3d-date-picker="true" class="date-picker-theme-dark"></bs-date-input>在这个case当中，我们定义了两个不一样的class的值：form-control，来自组件的模板；date-picker-theme-dark，从父组件传进来的
对于多数特性来说，传递给组件的值会覆盖组件本身设定的值且有可能破坏该组件！索性我们对待class和style特性会把这两个特性的值做合并(merge)操作，让最终生成的值为：form-control date-picker-theme-dark
自定义事件
我们知道父组件是使用props传递数据给子组件，但子组件怎么跟父组件通信呢？这个时候Vue的自定义事件系统就派得上用场了
使用v-on绑定自定义事件
每个Vue实例都实现了事件接口(Events interface)，即：用$on(eventName)监听事件；用$emit(eventName)触发事件
Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on和$emit不是addEventListener和dispatchEvent的别名
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件
不能用$on侦听子组件抛出的事件，而必须在模板里直接用v-on绑定，就像以下的例子：
<div id="counter-event-example">
<p>{{total}}</p>
<button-counter @increment="incrementTotal"></button-counter>
<button-counter @increment="incrementTotal"></button-counter>
</div>
<script>
Vue.component('button-counter',{
template:'<button @click="incrementCounter">{{counter}}</button>',
data:function(){
return{ counter:0 }
},
methods:{
incrementCounter:function(){
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el:'#counter-event-example',
data:{
total:0
},
methods:{
incrementTotal:function(){
this.total += 1
}
}
})
</script>本例中子组件已经和它外部完全解耦,它所做的只是报告自己的内部事件，至于父组件是否关心则与它无关
给组件绑定原生事件
有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on。例如：
<my-component v-on:click.native="doTheThing"></my-component>.sync修饰符
在vue 1.x中.sync实现了对prop 进行『双向绑定』的功能，但是他破坏了单向数据流的假设，光看子组件的代码时完全不知道它何时改变了父组件的状态，增加维护成本；所以在2.0中.sync被移除；但2.0发布后的实际应用中，我们发现.sync还是有其适用之处，于是从2.3.0我们重新引入了.sync修饰符，但这次只作为一个编译时的语法糖存在，它会被扩展为一个自动更新父组件属性的v-on侦听器，如下：
<comp :foo.sync="bar"></comp>会被扩展为：
<comp :foo="bar" @update:foo="val => bar = val"></comp>当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)使用自定义事件的表单输入组件
自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。看看这个：
<input v-model="something">这是以下示例的语法糖：
<input v-bind:value="something" v-on:input="something = $event.target.value">所以在组件中使用时，它相当于下面的简写：
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>所以要让组件的v-model生效，应该(在2.2.0+这是可配置的)：接受一个value属性,在有新值时触发input事件
我们来看一个非常简单的货币输入的自定义控件：
<currency-input v-model="price"></currency-input>
<script>
Vue.component('currency-input',{
template:'<span><input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)"></span>'
props:['value'],
methods:{
updateValue:function(value){
var formattedValue = value.trim().slice(0,value.indexof('.') === -1 ? value.length : value.indexof('.') + 3 )
if(formattedValue !== value){
this.$refs.input.value = formattedValue
}
this.$emit('input',Number(formattedValue))
}
}
})
</script>定制组件的 v-model
默认一个组件的v-model会用value属性和input事件，但如单选框、复选框之类的输入类型可能把value属性用作了别的目的。model选项可以回避这样的冲突：
<my-checkbox v-model="foo" value="some value"></my-checkbox>
<script>
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
value: String
},
// ...
})
</script>上述代码等价于：
<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"></my-checkbox>注意仍然需要显性声明checked属性
非父子组件通信
有时两个组件也需通信(非父子关系)。简单的场景下，可以使用一个空的Vue实例作为中央事件总线：
var bus = new Vue()
bus.$emit('id-selected', 1) // 触发组件 A 中的事件
bus.$on('id-selected', function (id) { // 在组件 B 创建的钩子中监听事件
// ...
})在复杂的情况下，我们应该考虑使用专门的状态管理模式
使用slot分发内容
在使用组件时，我们常常要像这样组合它们：
<app>
<app-header></app-header>
<app-footer></app-footer>
</app>注意两点：
1.组件不知道它会收到什么内容。这是由使用的父组件决定的
2.组件很可能有它自己的模版
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发(或 “transclusion” )。Vue.js实现了一个内容分发API，参照了当前 Web组件规范草案，使用特殊的元素作为原始内容的插槽
编译作用域
在深入内容分发API之前，我们先明确内容在哪个作用域里编译。假定模板为：
<child-component> {{ message }} </child-component>message应该绑定到父组件的数据。组件作用域简单地说是：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：
<child-component v-show="someChildProperty"></child-component><!-- 无效 -->假定someChildProperty 是子组件的属性,上例不会如预期那样工作;父组件模板不应该知道子组件的状态。如要绑定作用域内的指令到一个组件的根节点应在组件自己的模板上做：
Vue.component('child-component', {
template: '<div v-show="someChildProperty">Child</div>', // 有效，因为是在正确的作用域内
data: function () {
return {
someChildProperty: true
}
}
})类似地，分发内容是在父作用域内编译
单个slot
除非子组件模板包含至少一个插口,否则父组件的内容将会被丢弃;当子组件模板只有一个没属性的slot时,父组件整个内容片段将插入到slot所在的DOM位置并替换掉slot标签本身.最初在标签中的任何内容都被视为备用内容,备用内容在子组件的作用域内编译,并且只有在宿主元素为空且没有要插入的内容时才显示备用内容
假定my-component组件有下面模板：
<div>
<h2>我是子组件的标题</h2>
<slot> 只有在没有要分发的内容时才会显示 </slot>
</div>父组件模版：
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>渲染结果：
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>具名 Slot
元素可以用一个特殊的属性name来配置如何分发内容。多个slot可以有不同的名字。具名slot将匹配内容片段中有对应slot特性的元素。仍然可以有一个匿名slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。如果没有默认的slot，这些找不到匹配的内容片段将被抛弃。
例如，假定我们有一个 app-layout 组件，它的模板为：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>父组件模版：
<app-layout>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</app-layout>渲染结果为：
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>在组合组件时，内容分发 API 是非常有用的机制
作用域插槽
作用域插槽是一种特殊类型的插槽，用作使用一个(能够传递数据到)可重用模板替换已渲染元素。在子组件中，只需将数据传递到插槽，就像你将props传递给组件一样：
<div class="child">
<slot text="hello from child"></slot>
</div>在父级中，具有特殊属性 scope 的 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象：
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>如果我们渲染以上结果，得到的输出会是：
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项：
<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>列表组件的模板：
<ul>
<slot name="item" v-for="item in items" :text="item.text"> <!-- 这里写入备用内容 --> </slot>
</ul>动态组件
通过使用保留的元素动态地绑定到它的is特性，我们让多个组件可以使用同一个挂载点，并动态切换：
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变！ --> </component>也可以直接绑定到组件对象上：
var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：
<keep-alive>
<component :is="currentView"> <!-- 非活动组件将被缓存！ --> </component>
</keep-alive>杂项
编写可复用的组件
在编写组件时留意是否要复用组件是有好处的。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
Vue 组件的 API 来自三部分 - props, events 和 slots ：
Props 允许外部环境传递数据给组件
Events 允许从外部环境在组件内触发副作用
Slots 允许外部环境将额外的内容组合在组件中
使用 v-bind 和 v-on 的简写语法，模板的缩进清楚且简洁：
<my-component :foo="baz" :bar="qux" @event-a="doThis" @event-b="doThat">
<img slot="icon" src="...">
<p slot="main-text">Hello!</p>
</my-component>子组件索引
尽管有props和events，但有时仍需要在JS中直接访问子组件。为此可以使用ref为子组件指定一个索引ID。例如：
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile当 ref 和 v-for 一起使用时，ref 是一个数组，包含相应的子组件
$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模板或计算属性中使用$refs
异步组件
在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了让事情更简单，Vue.js允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。例如：
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// Pass the component definition to the resolve callback
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})工厂函数接收一个resolve回调，在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。这里setTimeout只是为了演示。怎么获取组件完全由你决定。推荐配合使用：Webpack的代码分割功能：
Vue.component('async-webpack-example', function (resolve) {
// 这个特殊的require语法告诉webpack，自动将编译后的代码分割成不同的块，这些块将通过Ajax请求自动下载。
require(['./my-async-component'], resolve)
})可以使用Webpack 2 + ES2015的语法返回一个Promise resolve函数：
Vue.component(
'async-webpack-example',() => import('./my-async-component')
)当使用局部注册时，也可以直接提供一个返回Promise的函数：
new Vue({
components: {
'my-component': () => import('./my-async-component')
}
})如果是Browserify用户,可能就无法使用异步组件了,它的作者已经表明Browserify不支持异步加载。Browserify社区发现 一些解决方法，可能有助于已存在的复杂应用。对于其他场景，我们推荐简单实用Webpack构建，一流的异步支持
高级异步组件
自 2.3.0 起，异步组件的工厂函数也可以返回一个如下的对象：
const AsyncComp = () => ({
component: import('./MyComp.vue'), // 需要加载的组件. 应当是一个 Promise
loading: LoadingComp, // loading 时应当渲染的组件
error: ErrorComp, // 出错时渲染的组件
delay: 200, // 渲染 loading 组件前的等待时间。默认：200ms.
timeout: 3000 // 最长等待时间。超出此时间则渲染 error 组件。默认：Infinity
})注意：当一个异步组件被作为vue-router的路由组件使用时，这些高级选项都是无效的，因为在路由切换前就会提前加载所需要的异步组件。另外，如果你要在路由组件中使用上述写法，需要使用vue-router 2.4.0+
组件命名约定
当注册组件 (或者 props) 时，可以使用 kebab-case，camelCase，或 PascalCase
components: { // 在组件定义中
'kebab-cased-component': { /* ... */ }, // 使用 kebab-case 形式注册
'camelCasedComponent': { /* ... */ }, // register using camelCase
'PascalCasedComponent': { /* ... */ } // register using PascalCase
}在 HTML 模板中，请使用 kebab-case 形式：
<!-- 在HTML模板中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>使用字符串模式时，可以不受HTML的case-insensitive限制。这意味实际上在模板中，可以使用下面的方式来引用你的组件：
1.kebab-case
2.camelCase 或 kebab-case 如果组件已经被定义为 camelCase
3.kebab-case，camelCase 或 PascalCase 如果组件已经被定义为 PascalCase
components: {
'kebab-cased-component': { /* ... */ },
camelCasedComponent: { /* ... */ },
PascalCasedComponent: { /* ... */ }
}
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<camelCasedComponent></camelCasedComponent>
<pascal-cased-component></pascal-cased-component>
<pascalCasedComponent></pascalCasedComponent>
<PascalCasedComponent></PascalCasedComponent>这意味着PascalCase是最通用的声明约定而kebab-case是最通用的使用约定。如果组件未经slot元素传递内容，你甚至可以在组件名后使用 / 使其自闭合：
<my-component/>当然，这只在字符串模板中有效。因为自闭的自定义元素是无效的 HTML，浏览器原生的解析器也无法识别它
递归组件
组件在它的模板内可以递归地调用自己，不过，只有当它有 name 选项时才可以：
name: 'unique-name-of-my-component'当你利用Vue.component全局注册了一个组件, 全局的ID作为组件的 name 选项，被自动设置
Vue.component('unique-name-of-my-component', {
// ...
})如果你不谨慎, 递归组件可能导致死循环:
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'上面组件会导致一个错误“max stack size exceeded”，所以要确保递归调用有终止条件 (比如递归调用时使用 v-if 并让他最终返回 false )
组件间的循环引用
假设你正在构建一个文件目录树，像在Finder或文件资源管理器中。你可能有一个tree-folder组件:
<p>
<span>{{ folder.name }}</span>
<tree-folder-contents :children="folder.children"/>
</p>然后 一个tree-folder-contents组件：
<ul>
<li v-for="child in children">
<tree-folder v-if="child.children" :folder="child"/>
<span v-else>{{ child.name }}</span>
</li>
</ul>仔细看，会发现在渲染树上这两个组件同时为对方的父节点和子节点–这点是矛盾的。当使用Vue.component将这两个组件注册为全局组件的时候，框架会自动为你解决这个矛盾，如果你是这样做的，就不用继续往下看了。
然而，如果你使用诸如Webpack或者Browserify之类的模块化管理工具来requiring/importing组件的话，就会报错了
为了解释为什么会报错，简单的将上面两个组件称为A和B，模块系统看到它需要A，但是首先A需要B，但是B需要A，而A需要B，陷入一个无限循环，因此不知道到底应该先解决哪个。要解决这个问题，我们需要在其中一个组件中(比如A)告诉模块化管理系统，“A虽然需要B但是不需要优先导入B”
在例子中，我们选择在tree-folder组件中来告诉模块化管理系统循环引用的组件间的处理优先级，我们知道引起矛盾的子组件是tree-folder-contents，所以我们在beforeCreate 生命周期钩子中去注册它：
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}问题就解决了
内联模板
如果子组件有inline-template特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。这让模板更灵活
<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>但是inline-template让模板的作用域难以理解。最佳实践是使用template选项在组件内定义模板或者在.vue文件中使用template元素
X-Templates
另一种定义模板的方式是在 JavaScript 标签里使用 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'
})这在有很多模板或者小的应用中有用，否则应该避免使用，因为它将模板和组件的其他定义隔离了
对低开销的静态组件使用v-once
尽管在Vue中渲染HTML很快，不过当组件中包含大量静态内容时，可以考虑使用v-once将渲染结果缓存起来，就像这样：
Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
... a lot of static content ...\
</div>\
'
})