Vue學習手冊(四) 元件化開發

2021-10-24 15:19:45 字數 1294 閱讀 6871

三、父子元件通訊

3.3 子傳父事件

四、父子元件直接呼叫

五、插槽類子元件

script中呼叫

以下為父子元件的格式

單向傳值:即子元件中改變值的話,不會影響到父元件值,父元件值變動,會實時改變子元件資料

事件傳送:通常子元件向父元件傳送的是事件,父元件需要知道子元件發生了什麼事件,並做相應的反應

子元件寫法

>

class

='childstyle'

>

>

h1插槽子元件h1

>

>

slot

>

>

>

h3不具名插槽預設值h3

>

slot

>

name

="no_1"

>

>

h4具名插槽預設值h4

>

slot

>

name

="no_2"

>

slot

>

div>

template

>

>

export

default

script

>

>

>

>

v-slot:no_1

>

>

父元件傳給具名插槽no_1h1

>

template

>

v-slot:no_2

>

>

父元件傳給具名插槽no_2h1

>

template

>

>

>

父元件傳給不具名插槽h1

>

template

>

son>

div>

template

>

>

import son from

'../components/son.vue'

export

default

}script

>

不具名插槽:如果父元件不傳值,則各自使用各自的預設值;若傳值,則所有不具名插槽將會格式化為一樣的,如顯示第2、3行

向不具名插槽傳多個值:會被集合起來作為乙個不具名插槽傳送值傳給子元件

Vue03 元件化開發

將乙個頁面拆分成乙個個小的功能塊,每個功能塊完成屬於自己這部分獨立的功能,從而簡化整個頁面的管理和維護,提高專案的擴充套件性,這樣的流程稱作元件化 我是內容,呵呵呵 父傳子基本原理 借助props 傳遞資料 子傳父基本原理 子元件中,通過 emit 來發射乙個自定義事件。在父元件中,通過v on來監...

2 1 元件化開發

doctype html lang en charset utf 8 titletitle head 歡迎來到vue元件化h2 div 歡迎來到vue元件化h2 div 歡迎來到vue元件化h2 div body html 1.定義的元件,可以在同乙個頁面的多個vue例項中去使用 2.元件建立,組建...

Vue學習(四)元件(參考)

什麼是元件 元件的出現,就是為了拆分vue例項的 量的,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼樣的功能,就可以去呼叫對應的元件即可 元件化和模組化的不同 使用 vue.extend 配合 vue.component 方法 var login vue.extend vue.co...