[Vue] 組件基礎 1/2

Vue的組件(Component)使用

• 可透過 Vue.component 來自定義組件

Vue.component('counter', {

data: function () {

    return {

        count: 0

    }

},

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

})

• 要在 new Vue({ el: '#app' }) 的作用愈中才能使用

<div id="app">

<counter></counter>

</div>

• new Vue(...)中有的方法Vue.component(...)中絕大多數都有
• e.g. data, computed, watch, methods 生命週期鉤子(life cycle hook)等

• Vue.component(...)的data是函數

組件註冊

分為二種類型

• 全域註冊
• 顧名思義就是在根組件之下任何地方皆可使用
• 透過 Vue.component(...)產生

• 局部註冊

Prop

• 傳入參數給組件
• 可搭配v-for v-if ...等指令使用

source code