# 組件的復用 你可以將組件進行任意次數的復用，注意當點擊按鈕時，每個組件都會各自獨立維護它的 `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讓每個組件對象都返回一個新的對象，因為如果是同一個對象的，組件在多次使用后會相互影響。 **可以看計時器案例**