Vue元件相關知識

2021-10-07 12:36:24 字數 811 閱讀 6300

建立全域性元件的第一種方式

1.先呼叫』vue.extend()'得到元件的建構函式

2.通過vue.component(『元件名稱』, 元件的建構函式)來註冊全域性元件

3.把註冊好的元件名稱以標籤的形式引入到頁面中

輸出

這是建立全域性元件的第一種方式
建立全域性元件的第二種方式

輸出

這是建立全域性元件的第二種方式
建立全域性元件的第三種方式

輸出

這是建立全域性元件的第三種方式
建立區域性元件

輸出

這是建立的區域性元件
父元件向子元件傳遞資料

1.把要傳遞給子元件的資料,作為自定義屬性通過』v-bind』,繫結到子元件身上

2.子元件通過props接收輸出

父元件向子元件傳遞物件

1.把要傳遞給子元件的物件,作為自定義屬性通過』v-bind』,繫結到子元件身上

2.子元件通過props接收

輸出

這是子元件中的內容:
父元件向子元件傳遞方法

1.把要傳遞給子元件的方法,通過事件繫結』v-on』,繫結到子元件身上

2.子元件通過this.$emit()方法呼叫傳遞過來的方法

輸出

有人呼叫了父元件中的show方法
子元件向父元件傳值

本質上呼叫父元件傳遞過來的方法,子元件在呼叫的時候,把資料當作引數傳給父元件的方法

輸出

這是子元件的資料

vue元件相關

template class toast class toast com div transition div template scriptexport default css start 淡入淡出 toast com start 淡入淡出 匯入方式為 import toast from toas...

三 vue元件相關知識點

1 父vue中component 即子vue 引入 2 從父vue中向component 即子vue 內傳值 3 在父vue中呼叫子vue中的方法 父vue的html中 將ids繫結在子元件 的string上 父js 子vue中 這個結構看著有點亂,其實裡面包含了三個知識點 1 父vue中compo...

Vue中元件相關知識點

一 元件知識點 1.定義 何為元件,簡單來說,元件就是一組html標籤的集合,有點類似於模組,不過模組是基於不同的業務邏輯來劃分的,而元件則是基於頁面不同區域來劃分的。元件中允許有多個標籤,但只允許乙個根標籤。元件的產生同樣也增強了 的復用性。2.建立方式 建立元件例項可以有多種方式,這裡主要講解其...