Vue學習筆記 元件通訊 子傳父(自定義事件)

2022-03-14 00:23:21 字數 391 閱讀 2537

props用於父元件向子元件傳遞資料,還有一種比較常見的是子元件傳遞資料或事件到父元件中。

我們應該如何處理呢?這個時候,我們需要使用自定義事件來完成。

什麼時候需要自定義事件呢?

當子元件需要向父元件傳遞資料時,就要用到自定義事件了。

我們之前學習的v-on不僅僅可以用於監聽dom事件,也可以用於元件間的自定義事件。

自定義事件的流程:

在子元件中,通過$emit()來觸發事件。

在父元件中,通過v-on來監聽子元件事件。

134

567for="item in catgories" @click="btnclick(item)">8}

9101112

1314

Vue元件間的通訊 子傳父

實現方法 子元件向父元件中傳遞訊息通過自定義事件。即子元件通過在自身的事件執行方法中使用this.emit 自定義事件名稱 需要傳遞的內容 這個方法,在元件使用時監聽自定義事件,從而在父元件中處理自定義事件的帶引數的執行方法來進行資訊傳遞。通訊步驟 1 子元件自身觸發事件,在這個事件執行方法中通過呼...

Vue學習筆記 父元件向子元件傳值

靜態傳值 使用屬性的方式,然後子元件使用props進行接收 靜態傳遞的只能是字串型別string template 靜態傳值 props name template 動態傳值 把傳遞引數放到vue的data資料項裡,template中通過v bind繫結這個屬性 動態傳參的就可以是多種型別,甚至是乙...

VUE 父元件子元件間通訊

父元件給子元件傳參,子元件通過prop屬性進行接收 簡單搭建元件部分如下,其中父元素身上有兩個資料,分別是字元型資料1,json型資料2 子元件分別從父元件獲取這兩個資料並展示,其次子元件有自己的資料 子元件通過 emit 事件想父元件發射資料 頁面結構 其中child a為子元件 這是父元件 父元...