vue-学习笔记-基础3

1、组件

组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展

也就是说，一个app中，有很多地方的html结构大体上是一样的，只是展示的数据不一样，这种情况就可以将一致的结构定义成一个组件。有时候，一些自定义的元素如果是放在table,select等有特定规定的元素下(对子元素的标签有要求)，则可以采用is特性，将自定义的标签“伪装成”特定的子元素，这样就会正常的被包裹，要不然不是这些(table,select等)元素的子元素。

并且，如果一个组件中包含多个并列的元素，需要用一个元素来包裹，要不然不会渲染；全局注册的组件，需要在创建实例之前就注册好。

<div id='box'>
	<table>
		<tr is="my-component"></tr>
	</table>	
</div>

Vue.component('my-component',{//全局注册
	template:'<div>这是测试数据<p>testing</p></div>'
})
var vm = new Vue({
	el:"#box",
　　	data:{}
});

　1.1 全局注册 && 局部注册

全局注册的组件需要放在Vue实例化之前，局部注册的组件只能在当前实例内部使用

<body>
<div id='box'>
	<my-component></my-component>	
	<other-component></other-component>
</div>
<p>********分割线***********</p>
<div id='box2'>
	<my-component></my-component>
	<other-component></other-component>
</div>
<style type="text/css">
	*{padding: 0;margin: 0}	
</style>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('my-component',{//全局注册
	template:'<div>这是测试数据<p>testing</p></div>'
})
var otherTem = {
	template:'<div>a custom component</div>'
}
var vm = new Vue({
	el:"#box",
　　	data:{},
	components:{
		'other-component':otherTem
	}
})
new Vue({
	el:"#box2",
	data:{}
})

</script>
</body>

　　向上述代码中，other-component在box2中无法渲染，因为它的作用域在box中，而my-compoent是全局注册的，每个实例都可以使用

通过vue构造器传入的各种选项大多数都可以在组件里使用，但是，data必须是一个函数。因为既然是一个组件，肯定不会只用一次，既然要用多次，他们的数据就要独立，互不影响才对。并且，要求data返回的必须是一个对象，要不然会报错

这个可以用下面这种方式模拟

<body>
<div id='box'>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<style type="text/css">
	*{padding: 0;margin: 0}	
	button{padding:5px;}
</style>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var data = {counter:0};
Vue.component('my-component',{
	template:'<button @click="counter++">{{counter}}</button>',
	data:function(){
		return data
	}
})
new Vue({
	el:'#box'
})
</script>
</body>

　　三个按钮，显示的值会一样，因为他们共用同一个全局变量counter