Java成神之路:第一帖---- Vue的元件屬性components用法
阿新 • • 發佈:2020-09-12
Vue的元件屬性:components
使用場景
一般在專案的使用過程中,某個需要多次使用的模組,會將整個模組抽取出來,寫一個元件,供給其他頁面進行呼叫或者是在一個頁面中,多次使用到一個重複的程式碼樣式,將其抽取出來,用元件來代替,以實現程式碼的複用性。
元件又分為區域性註冊元件和全域性註冊元件
全域性註冊元件:指的是在任何一個頁面都可以進行使用的元件,例如:頭部、底部
區域性註冊元件:本頁面進行復用的程式碼樣式 ,例如:頁面中的活動模組
全域性註冊元件使用方法:
<script type="text/javascript"> //自定義元件,counter是元件的名稱 var counter = { template: "<button @click='num++'>你已經點選了{{num}}次</button>", //在元件中,data必須是返回值的函式,而不是屬性,所以要用data(),且用return返回資料 data(){ return {num:0} } } //全域性註冊元件,第一個是引數名字,第二個是元件名字 //“”內的counter是元件的名字,也可以用其他名字,第二個counter是指代上面的元件 Vue.component("counter",counter); </script>
區域性註冊元件使用方法:
<script type="text/javascript"> //自定義元件 var counter = { template: "<button @click='num++'>你已經點選了{{num}}次</button>", data(){ return {num:0} } } var vm=new Vue({ el:"#app", //區域性註冊元件,第一個counter是元件的名字,第二個counter是上面元件的名字 components:{ counter: counter } }); </script>
效果為:每點選一次按鈕,則num+1,意味著按鈕裡面的文字發生改變,也就變成了
你已經點選了0次
你已經點選了1次
你已經點選了2次
......
結束啦~