元件之間通訊

2022-02-25 04:29:23 字數 1381 閱讀 2272

一、父元件向子元件傳遞資料

在 vue 中,可以使用 props 向子元件傳遞資料。

子元件部分:

這是 header.vue 的 html 部分,logo 是在 data 中定義的變數。

如果需要從父元件獲取 logo 的值,就需要使用props: ['logo']

在 props 中新增了元素之後,就不需要在 data 中再新增變數了

父元件部分:

二、子元件向父元件傳遞資料

子元件主要通過事件傳遞資料給父元件

子元件部分:

首先宣告乙個了方法 setuser,用 change 事件來呼叫 setuser

在 setuser 中,使用了$emit來遍歷 transferuser 事件,並返回 this.username

其中 transferuser 是乙個自定義的事件,功能類似於乙個中轉,this.username 將通過這個事件傳遞給父元件 

父元件部分:

getuser 方法中的引數 msg 就是從子元件傳遞過來的引數 username

三、子元件向子元件傳遞資料

vue 沒有直接子對子傳參的方法,建議將需要傳遞資料的子元件,都合併為乙個元件。如果一定需要子對子傳參,可以先從傳到父元件,再傳到子元件。

為了便於開發,vue 推出了乙個 vuex,可以很方便實現元件之間的引數傳遞

vue元件之間通訊

個人blog,歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...

Android元件之間通訊

如rxbus,一般你只需要訂閱如下 task rxbus.toobserverable databean.class subscribe card 以上我們一般在activity中啟動時訂閱,呼叫網路訪問後,根據rxbus註冊事件型別返回到activity中更新ui 但是必須在activity的on...

Angular元件之間通訊

元件之間會有下列3種關係 1.父子關係 2.兄弟關係 3.沒有直接關係 通常採用下列方式處理 某些方式是框架特有 元件間的通訊,如下 1父子元件之間的互動 input output 模板變數 viewchild 2非父子元件 service localstorage 3還可以利用session等伺服...