vue之 组件与复用

1.为什么使用组件
如果我们写一个弹窗，弹窗中存在关闭按钮、输入框、发送按钮等。你可能会问，这有什么难的，你就是几个div、input吗？好，那现在需要升级了，这几个控件还有别的地方要用到。没问题，复制黏贴呗。那如果输入框要带数据验证，按钮的图标支持自定义呢？这样用JavaScript封装后一起复制呗。那等到项目快完结时，产品经理说，所有使用输入框的地方要改成支持回车键提交。好吧，给我一天的时间，我一个一个加上去。上面的需求虽然有点变态，但却是业务中很常见，那就是控件，Javascript能力的复用。没错，Vue.js的组件就是提高重用性的，让代码可复用，当学完组件，上面的问题就可以分分钟搞定，再也不用担心产品经理的奇葩需求。

2.组件的用法
回顾一下我们创建Vue实例的方法：

var app = new Vue ({
	el: '#app'
})

组件与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后，任何Vue实例都可以使用。
1.全局注册示例代码如下：

Vue.component('my-component', {
	// 选项
})

my-component就是注册组件自定义的标签名称，推荐使用小写加减号分割的形式命名。
要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以使用的形式使用组件了，示例代码如下：

<div id="app">
	<my-component></my-component>
</div>
<script>
	Vue.component('my-component', {
		template:'<div>这里是组件的内容</div>'
	})；
    var app = new Vue({
			el: '#app'
	})
</script>

渲染后的结果是：

<div id="app">
	<div>这里是组件的内容</div>
</div>

注意：template的DOM结构必须被一个元素包含，如果直接写成“这里是组件的内容，不带

是无法渲染的

2.局部注册代码如下

<div id="app">
	<my-component></my-component>
</div>
<script>
	var Child = {
		template:'<div>这里是组件的内容</div>'
	}
    var app = new Vue({
			el: '#app',
			components:{
				'my-component'	:Child
			}
	})
</script>