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
