Vue组件

为什么使用组件

JavaScript能力的复用。Vue.js的组件提高重复性，让代码可以复用。

组件的用法

组件在使用前先需要注册。注册分为两种方式：全局注册和局部注册。全局注册后，任何vue都可以使用。全局注册代码：

Vue.component('my-component',{

    template : '<div>这是一个组件</div>'
})

my-component就是注册的自定义标签名称，推荐使用小写 + 、-  来分割形式命名

局部注册：使用components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。这样可以使组件可以嵌套

<div id="app">
		<my-component></my-component>
		<my-componenttwo></my-componenttwo>
</div>

	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	
		Vue.component('my-component',{
			template : '<div>这是一个组件</div>'
		});
		
		var child = {
				template:'<div>这是一个子组件</div>'
		};
	
		new Vue({
			el:"#app",
			components:{
				'my-componenttwo':child
			}
		});
	
</script>	

 

Vue组件在某些情况下会受到HTML的限制，比如在<table>标签下只能有<th>、<tr>....那么这时候我们可以使用特殊的is属性来进行挂载。  eg:如果使用的是字符串模板的时候，是不会被限制的。

Vue除了可以使用template选项外，还可以像Vue实例那样使用其他的选项，比如，data、compputed、methods等。使用data的时候与实例有所差别、组件使用data的情况是函数的形式。

Js对象是引用的关系，如果你在外部引用了一个对象，那么这个对象就是共享的，任何一方修改都会被同步的。

举个例子

	<div id="app">
		<my-component></my-component>
		<my-component></my-component>
		<my-component></my-component>
	</div>

	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	
	
	<script type="text/javascript">
		var shuju = {
			counter : 0
		};
	
		Vue.component('my-component',{
			template : '<button @click="counter++">{{counter}}</button>',
			data:function(){
				return shuju;
			}
		});

		new Vue({
			el:"#app",
		});
	
	</script>	

如果想正确的处理  应该把shuju这个变量放在data function(){}函数下边。