vue中 的傳值問題 父傳子和子傳父

2022-05-07 05:00:13 字數 1085 閱讀 3183

1、父組件可以使用props 把資料傳給子元件。

2、子元件可以使用$emit 觸發父元件的自定義事件。

vm.$emit( event, arg ) //觸發當前例項上的事件

vm.$on( event, fn );//監聽event事件後執行 fn; 

引用官網的一句話:父子元件的關係可以總結為 prop 向下傳遞,事件向上傳遞

父元件通過 prop 給子元件下發資料,子元件通過事件給父元件傳送訊息,如下圖所示:

子元件的**:

}

父元件**:

:msg="text">

父傳子的實現方式就是通過props屬性,子元件通過props屬性接收從父元件傳過來的值,而父元件傳值的時候使用 v-bind 將子元件中預留的變數名繫結為data裡面的資料即可例如:子元件:

class="train-city">

@click='select(`大連`)'>點選此處將『大連』發射給父元件

父元件:

父元件的tocity}

@showcityname="updatecity" :senddata="tocity">

點選之前:

點選之後:

vue 父傳子,子傳父

父元件向子元件傳值 父 子元件新增行內便簽v bind message orderlistname 之定義傳引數orderlistname 13 子 接受傳值內容props message 父頁面傳值內容,以this.message賦值。父元件 子元件 子元件向父元件傳值 子傳值 傳送傳值內容 th...

vue中父傳子 子傳父 非父子元件傳值

父傳子 通過v bind的形式傳值,子元件通過props接收。子元件的h2標籤中的 在頁面上的展示為world。父元件 home hello div data hr br 子元件 hello h2 div props 子傳父 通過 emit 事件 引數 的方式傳值 子元件 hello handlec...

uni app中元件傳值 父傳子,子傳父

通過props來實現,子元件通過props來接收父元件傳過來的值!1 邏輯梳理 第一步 引入子元件 1 import sonshow from component son.vue 第二步 在components中對子元件進行註冊 1 components 4第三步 以標籤的形式載入 通過資料繫結的形...