Vue-組件、傳值props

目錄

一、全局組件-關鍵詞component

一、局部組件

二、子父組件-父向子組件傳遞數值

Props關鍵字:

三-子組件向父組件傳值

四、組件插槽

五、具名插槽


必須先註冊組件才能夠使用

一、全局組件-關鍵詞component

註冊語法規則:

Vue.component (組件名稱,{

data:組件數據,

template:組件模板內容

})

例如:

注意:

組件名稱命名方式有兩種,一種是如上圖短橫線的方式,一種是駝峯HelloWorld。

使用駝峯命名方式後,使用它必須改成短橫線的方式+小寫如:<hello-world></hello-world>

組測好後如何使用?

組測的組件名爲button-counter

用法在id=“app”容器下寫<button-counter></button-counter>即可

一、局部組件

註冊方式

 

二、子父組件-父向子組件傳遞數值

如何定義:

Props關鍵字:

作用:通過props接收傳過來的值,父——>子

傳遞方式:

靜態方式:

1.在父組件中通過屬性的方式傳遞給子組件,子組件通過props進行接收

動態方式:

1.就是在父組件內容中添加冒號(:)

三-子組件向父組件傳值

子組件:

觸發自定義事件。觸發特定的方法$emit並攜帶自定義參數

父組件:

監聽子組件的事件,執行相應的動作

四、組件插槽

五、具名插槽

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章