vue-元件基礎

VH發表於2018-08-13
Vue元件

vue-學習記錄

元件基礎

Vue的元件是從使用Vue.component開始的。 Vue.component（'元件名稱',object），至於object裡的引數容我們慢慢在後面的?中道來。

Vue元件監聽按鈕被點選的次數：

Vue.component('button-clicknum',{
    data:{
        number:0,
    },
    template:'<button @click="number++">你點選了{{number}}次</button>'
});
複製程式碼

因為元件須在Vue例項下才能使用，所以需要我們 new Vue 並使用上方的 button-clickNum 元件名稱作為自定義元素,元件中的引數所接受的跟vue 例項一樣除了 el 是不接受的只能在vue 例項中。

new Vue({
    el:'#demo-1'
});
複製程式碼

現在在body下新增標籤：

<div id="demo-1">
    <button-clicknum></button-clicknum>
</div>
複製程式碼

效果：

vue-元件基礎

在每次點選按鈕後將進行data下 number 的增加。

元件的複用，只需要在標籤內多次的輸入自定義元素即可：

<div id="demo">
    <button-clicknum></button-clicknum>
    <button-clicknum></button-clicknum>
    <button-clicknum></button-clicknum>
</div>
複製程式碼

效果：

vue-元件基礎

當點選每一個按鈕時，每一個按鈕都是vue的例項，它們各自維護自己的 number。

vue 元件下的 data必須為函式

data:function(){
    return {
        xxx:''
    }
}
複製程式碼

元件呼叫後返回的data都是獨立的，而vue沒有這一條規則的話，元件之間就會互相影響，大家切記哦！?

相關文章