vue.component(元件名稱, )
// 1)建立元件構造器
const cpnc = vue.extend(
) // 2)註冊元件 (全域性元件)
vue.component(
'my-cpn',cpnc)
// 3)使用元件
, (區域性元件)
components:})
註冊的語法糖
// 1.註冊全域性元件
vue.component(
'cpn1',
) // 2.註冊區域性元件的語法糖
, components: }}
)
1)子元件內部通過props
接收傳遞過來的值
vue.component(
'cpns',}`)
props
屬性值型別:string、number、boolean、array、object2)父元件通過屬性將值傳遞給子元件
'來自父元件的資料'
>
// 靜態資料
'title' /> // 動態繫結資料,屬性名
1)子元件通過自定義事件向父元件傳遞資訊
'$emit("enlarge-text")'
>父元件字型變大
2)父元件監聽子元件的資訊
>
''>
}"parr" @enlarge-text=
'handle'
>
methods:
}
子級向父級傳遞:自定義事件1)在子元件中,通過$emit()
來觸發事件
2)在父元件中,通過v-on
來監聽子元件事件 ;v-on
可以簡寫為@
var eventhub = new vue(
)
2)監聽事件和銷毀事件
eventhub.$on
('add',addtask)
eventhub.$off
('add'
)
3)觸發事件
eventhub.$emit
('add',引數)
template: `
error`,}
)
2)具名插槽
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...