VUE元件化開發

vue.component(元件名稱， )

// 1）建立元件構造器

const cpnc = vue.extend(
) // 2）註冊元件 （全域性元件）
vue.component(
'my-cpn',cpnc)
// 3）使用元件
, （區域性元件）
components:})

// 1.註冊全域性元件

vue.component(
'cpn1', 
) // 2.註冊區域性元件的語法糖
, components: }}
)

vue.component(

'cpns',}`)

'來自父元件的資料'

>
// 靜態資料
'title' /> // 動態繫結資料,屬性名

'$emit("enlarge-text")'

>父元件字型變大

>

''>
}"parr" @enlarge-text=
'handle'
>
methods: 
}

2）在父元件中，通過v-on來監聽子元件事件 ；v-on可以簡寫為@

var eventhub = new vue(

)

eventhub.$on

('add',addtask)
eventhub.$off
('add'
)

eventhub.$emit

('add',引數)

template: `

error`,}
)

Vue元件化開發

1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...

Vue元件化開發

前言 1 全域性元件註冊語法 vue.comonent 元件名稱，2 元件的用法 3 元件註冊注意事項 4 元件的命名方式 vue.component my component vue.component mycomponent 5 區域性元件註冊 var componenta var compon...

Vue元件化開發

1.建立元件構造器 2.註冊元件 3.使用元件 cpn div 1.建立元件構造器物件 const cpnc vue.extend 2.註冊元件 標籤名，元件構造器 vue.component cpn cpnc newvue script 各步驟的含義 1.vue.extend 2.vue.comp...