Vue非单文件组件

组件是Vue.js的一大特色，体现封装，复用等重要思想。组件能让我们将应用模块抽取独立可用，几乎任意类型的应用的界面都可以抽象为一个组件树。

一般组件可分为非单组件文件和单组件文件。

• 非单组件文件：一个文件包含n个组件
• 单组件文件：一个文件包含1个组件

vue注册(创建)组件有两种方式全局和局部。

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

局部注册的组件只能在当前创建的Vue根实例中使用。

全局组件注册

创建一个全局的Vue组件，可用使用Vue.componet()，能在任何新建的Vue实例中使用。

<div id="app">
	<mycomponet></mycomponet>
</div>
<script type="text/javascript">
	//Vue全局组件注册
	Vue.component('mycomponet',{
		template:`
			<h1>自定义全局组件</h1>
		`
	})
	var vm = new Vue({
		el:"#app"
	})
</script>

局部组件注册

创建一个局部的Vue组件，在当前Vue实例中注册，并只能在当前Vue实例中使用。

<div id="app">
	<my-componet></my-componet>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		components:{
			'my-componet':{
				template:`
					<h1>自定义局部组件</h1>
				`
			}
		}
	})
</script>

Vue组件在template中写入该组件实际HTML代码，就好比让我们能够自定义一个HTML标签。

注意：

1. 若想要在组件模板中放入多个HTML标签，必须将组件模板中内容包裹在一个父元素内。
2. 官方推荐自定义组件名规范为kebab-case(短横线分隔命名)，即字母全小写且必须包含一个连字符。避免与未来新加入的HTML标签名冲突。

更多具体内容，可参考传送门 (opens new window)

复用组件

组件是可以任意次数的复用的。

<div id="app">
	<my-componet></my-componet>
	<my-componet></my-componet>
	<my-componet></my-componet>
</div>
<script type="text/javascript">
	//Vue全局组件注册
	Vue.component('my-componet',{
		template:`
			<h1>自定义全局组件</h1>
		`
	})
	var vm = new Vue({
		el:"#app"
	})
</script>

因为组件是可以复用的Vue实例，其实它们与new Vue的时候具有相同的选项的，例如例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

<div id="app">
	<button-counter></button-counter>
	<button-counter></button-counter>
</div>
<script type="text/javascript">
	Vue.component('button-counter',{
		data:function(){
			return {
				count:0
			}
		},
		methods:{
			add:function(){
				this.count++;
			}
		},
		template:`
			<button v-on:click="add">You clicked me {{ count }} times.</button>
		`
	});
	var vm = new Vue({
		el:"#app"
	});
</script>

可以把Vue组件理解为一个独立Vue实例，它具有像在Vuejs入门中Vue的特性，比如Vue实例基本选项data，methods，又如在template支持模板语法，条件渲染，列表渲染和事件绑定等。

注意：data 必须是一个函数，不像之前直接提供对象，取而代之是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。

更多具体内容，可参考传送门 (opens new window)、传送门 (opens new window)。

动态组件

有时候需要在不同组件之间来回切换，这时候就需要动态组件。

动态组件需要利用保留的<component></component>标签，通过其is属性，使得多个组件能够来回进行切换。

<div id="app">
	<button type="button" @click="changeCurrentComponet('first')">子组件1</button>
	<button type="button" @click="changeCurrentComponet('second')">子组件2</button>
	<button type="button" @click="changeCurrentComponet('third')">子组件3</button>
	<componet v-bind:is="currentComponent"></componet>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			currentComponent: 'first'
		},
		methods: {
			changeCurrentComponet: function(current) {
				this.currentComponent = current
			}
		},
		components: {
			first: {
				template: '<div>这是子组件1</div>'
			},
			second: {
				template: '<div>这是子组件2</div>'
			},
			third: {
				template: '<div>这是子组件3</div>'
			},

		}
	})
</script>

更多具体内容，可参考传送门 (opens new window)