# 组件的复用
你可以将组件进行任意次数的复用，注意当点击按钮时，每个组件都会各自独立维护它的 `alert`。因为你每用一次组件，就会有一个它的新**实例**被创建。
# 组件数据的存放
* 组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
* **只是这个data属性必须是一个函数**
* 而且这个函数返回一个对象，对象内部保存着数据
```
<div id="app" class="container" style="margin-top: 100px;">
<my-alert></my-alert>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-alert',{
data(){
return {
msg:'你好'
}
},
template:`<div class="alert alert-success" role="alert">{{msg}}</div>`
})
var vm = new Vue({
el:'#app',
})
</script>
```
## 为什么是一个函数（拓展）
* 首先，如果不是一个函数，Vue直接就会报错。
* 其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。
**可以看计时器案例**
