Vue.js组件

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

1.全局组件

注册：

Vue.component(tagName, options)//tagName 为组件名，options 为配置选项

调用：

<tagName></tagName>

实例

<div id="app">
	<!-- 调用组件 -->
    <test></test>
  </div>
</template>

<script>
//注册组件
Vue.component('test',{
	template:'<h1>自定义组件！</h1>'
})
//创建根实例
new Vue({
	el: '#app'
})
</script>

2.局部组件

局部组件只能在父模板中调用

实例

<div id="app">
	<!-- 3.调用组件 -->
	<test></test>
</div>

<script>
	//1.定义组件
	var Child = {
		template: '<h1></h1>'
	}

	//创建根实例
	new Vue({
		el: '#app',
		//2.注册组件
		components: {
			//<test>将只在父模板可用
			'test': Child
		}
	})
</script>