Vue元件間的通訊 子傳父

2021-10-05 03:45:19 字數 634 閱讀 3656

實現方法:

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

通訊步驟:

(1)子元件自身觸發事件,在這個事件執行方法中通過呼叫this.$emit('自定義事件名稱',傳遞的資訊內容)這個方式向父元件傳送資訊

(2)在vue例項範圍內使用元件時,在元件上通過v-on監聽子元件中設定的自定義事件,事件的執行方法在父元件中定義,在父元件中處理自定義事件的帶引數執行方法(這個引數用於接收傳遞過來的資訊)。

通訊步驟詳解:

//1.建立vue例項物件;建立子元件構造器物件,設定子元件實現功能;將元件構造器物件掛載到vue例項物件上,構成父子元件.

//2.在子元件中設定觸發資訊傳遞的事件,通過子元件的事件執行方法呼叫this.$emit("自定義事件",所傳內容)這個方法進行通訊傳遞

//3.在vue例項物件控制範圍內使用子元件,同時監聽子元件中設定的自定義事件,並呼叫父元件的執行方法;通過父元件的帶引數執行方法處理子元件傳遞過來的資訊。

**實現:

}

VUE 父元件子元件間通訊

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

vue元件間通訊子與父

二 元件間通訊 子元件傳值給父元件 通過事件的方式來完成資料的傳輸。在父元件中 定義乙個方法,用來接收子元件所通過事件傳來的值 methods 繫結事件處理函式 事件一般情況 都是自定義事件 在子元件觸發事件 事件名,值 this.emit myevent myphone 觸發乙個叫做myevent...

Vue元件間的通訊 父傳子通訊

一 原理 元件的通訊 父元件向子元件傳遞訊息 方法 通過子元件的props屬性進行傳遞.props屬性設定資料內容變數的定義方式有兩種方式 方式一 字串陣列型別,陣列中的字串就是用於接收父元件所傳資料的自定義變數名稱 這種方式不常用 props 自定義儲存變數名1 自定義儲存變數名2 方式二 物件型...