在正式開始講解元件之前，我們先來看乙個簡單的例子：
vue.component('button-counter',
},template: '} times'
})
vue.component()建立了乙個名為 button-counter 的全域性元件
該方法的第乙個引數是元件名，第二個引數是選項物件，物件中包含兩個屬性，data和template
屬性data是乙個返回物件的函式，用於儲存動態變化的資料
之所以定義為函式，是因為元件可能被用來建立多個例項，若定義為物件，則所有例項將會共享同乙份資料物件
屬性template是乙個模板字串，用於定義元件的 html **
需要注意的是，元件必須是單根元素，也就是說模板的內容必須包裹在乙個父元素內
然後，我們就可以在乙個通過new vue()建立的根例項中，把這個元件當作自定義元素使用
好，在對元件有了乙個初步的理解之後，下面我們再來進行詳細的學習
元件是可復用的 vue 例項，在使用元件前，我們首先要對元件進行註冊，以便於 vue 能夠識別出來
（1）元件註冊的引數有兩個，分別是元件名和選項物件
定義元件名的方式有兩種，分別是 kebab-case（短橫線分隔命名）和 pascalcase（首字母大寫命名）
kebab-case：在引用時，需要使用 kebab-case
pascalcase：在模板中使用時，兩種命名法都可用；在 dom 中使用時，只有 kebab-case 是有效的
該物件接收的選項與new vue()接收的選項類似，僅有的例外是像el這樣的根例項特有的選項
（2）元件註冊的方式有兩種，分別是全域性註冊和區域性註冊
我們可以使用全域性方法vue.component()進行全域性註冊，該方法的第乙個引數是元件名，第二個引數是選項物件
全域性註冊的元件可以在任何新建立的根例項中使用
vue.component('component-a', )
vue.component('component-b', )
components進行區域性註冊，它是乙個物件，鍵是元件名，值是選項物件
區域性註冊的元件不可以在其子元件中使用，也就是說，在下例中的兩個元件不可以在各自內部相互呼叫
var componenta =
var componentb =
new vue(
})
componenta在componentb中可用，我們需要換一種寫法：
var componenta =
var componentb = ,
// ...
}
（1）傳遞靜態 prop
在下例中，我們給 prop 傳遞了乙個靜態的值，title here
在下例中，我們通過v-bind給 prop 繫結了乙個動態的物件，content
在上面的兩個例子中，props 都是乙個字串陣列，其中的每乙個 prop 都是乙個字串
但事實上，prop 還可以是其它型別
這時我們可以用物件列出 prop，其中物件的鍵是 prop 的名稱，物件的值是 prop 的型別
vue.component('my-component', ,
// ...
})
vue.component('my-component', ,
// 帶有預設值的數字
propd: ,
// 帶有預設值的物件
prope: }},
// 自定義驗證函式
propf:
}}})
prop 是乙個單向下行繫結，即父級 prop 的更新會向下流動到子元件中，但反過來不行
如果子元件要把資料傳遞給父元件，則需要使用自定義事件
父元件可以通過v-on監聽子元件例項的任意事件，而子元件可以通過$emit()觸發事件
（1）監聽子元件事件
vue.component('button-counter', }',
data: function ()
},methods:
},})
子元件 button-counter 使用v-on監聽原生事件 click，該事件的處理函式是incrementhandler()
在incrementhandler()中，首先將 counter（子元件中的資料）的值加 1，然後觸發自定義事件 increment
new vue(,
methods:
}})
v-on監聽自定義事件 increment，該事件的處理函式是incrementtotal()
在incrementtotal()中，將 total（根元件中的資料）的值加 1
（2）通過事件丟擲乙個值
我們可以在$emit()函式的第二個引數中丟擲乙個值
vue.component('button-counter', }',
data: function ()
},methods:
},})
new vue(,
methods:
}})
vue學習筆記3 元件
1 元件命名 a.全小寫加連線符 vue.component my component name 當使用 kebab case 短橫線分隔命名 定義乙個元件時，你也必須在引用這個自定義元素時使用 kebab case，例如。b 駝峰式 vue.component mycomponentname 當使...
Vue學習筆記 6 元件註冊
3.基礎元件的自動化全域性註冊 我們前一篇提到了元件註冊，但是那裡用的是我們的全域性註冊。註冊分為區域性註冊和全域性註冊 下面開始講解 lang en charset utf 8 titletitle src script head v for i in names v bind value i x...
vue學習筆記（五） 元件通訊
關於vue父子元件通訊 github suerimn 如果元件是乙個單頁面，元件之間存在父子關係，資料傳遞就需要根據父子不同的地位使用不同的辦法。借助新建的electron vue專案自帶的兩個元件來說明。目錄結構如下 其中landingpage.vue是父元件，systeminformation....