三、父子元件通訊
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...