VUE元件化開發

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...

VUE元件化開發

Vue元件化開發

Vue元件化開發

Vue元件化開發

相關推薦