vue元件通訊 子元件傳遞資料給父元件

2021-08-21 16:13:21 字數 395 閱讀 5942

上次已經介紹了父元件如何傳遞資料給子元件,那麼,子元件又是如何將資料傳遞給父元件的呢?

vue中,子元件用$emit()來觸發事件,父元件用$on()來監聽子元件,也可通過直接在子元件的自定義標籤上使用v-on來監聽子元件觸發的自定義事件。

下面通過乙個例子來講解:

每次加2後的總數:}

這裡只講解加1的操作,在子元件中,在模板中宣告了乙個自定義事件toadd1,父元件通過v-on事件繫結,在子元件中執行加1操作後,通過$emit來觸發toadd1事件(emit的第乙個引數,子元件的自定義事件),通過傳入引數(emit的第二個引數),當子元件觸發後父元件監聽並將資料通過引數傳遞給total函式,然後渲染到父元件中。

明天繼續補充!!!

vue父元件傳遞值給子元件筆記

解釋 當前vue頁面中呼叫另乙個子元件 多用於公共方法抽成子元件呼叫,在各個頁面中都可使用 子元件定義 父元件傳遞的值 v bind 繫結的值跟子元件props中定義的保持一致 父元件中區域性註冊子元件 區域性註冊元件,在每個頁面中使用都需要重新註冊,此時,可以使用全域性註冊的方式去實現 一次註冊,...

react 子元件傳遞資料給父元件

第一種 通過定義函式實現 1 父元件設定含有this.setstate 的方法,形參為接收子元件的變數 2 將方法作為引數傳遞給子元件 如3 子元件通過this.props.鍵名接收函式 this.props.鍵名 子元件的資料 第二種 通過父元素傳遞的函式在標籤中通過箭頭函式,直接傳參 如 示例 ...

Vue父元件傳遞非同步獲取的資料給子元件

當父元件傳給子元件的資料是在父元件中非同步獲取的時候,如何讓子元件獲取期望的值?在父元件中 首先在data 中定義data detail為空 data 然後將data detail傳遞給子元件 data item是在父元件中非同步請求的資料 searchdatadetail param.data i...