vue父子元件通訊，巢狀元件

2021-09-24 14:17:08 字數 1115 閱讀 8246

子傳父：

子元件定義事件say

@click


="say"


>


子傳父div


>


methods裡面執行say方法，通過emit給父元件傳遞乙個叫sire的自定義事件，它會自動去父元件裡面尋找sire事件


say()


,
父元件引用子元件模板、宣告型別、註冊元件、sire自定義事件必須與子元件給的一致

"say($event)"


>


<


/temp>


import temp from


"../template/temp"


;props:


,components:


,say


(e),
父傳子：

模板上使用 :get=「要傳的引數」

:get


="list"


@sayab


="say($event)"


>


demos


>
子元件接收傳過來的datas資料，資料型別根據需求定

props: ['datas']  或者 props: ,
這樣就可以直接使用datas了

巢狀元件

<


/demos>


import demos from


'../template/demo'


components:


,

Vue父子元件通訊

1.父與子通訊，通過屬性傳遞值，如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

vue父子元件通訊

一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名，html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件，父元件利用v on對事件進行監聽，實現引數的傳遞...

Vue父子元件通訊

抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容，需要引入props，也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數，則某個部分要和引數post對應，即 v bind post post...