vue父子元件之間的通訊

2021-08-06 05:04:45 字數 533 閱讀 5252

父子元件

父子元件的關係:通常元件a在它的模板中使用元件b,此時元件a為父元件,元件b為子元件。

父子元件應該解耦,元件例項的作用域孤立的,子元件中不能直接使用父元件的資料。應該使用props傳遞父元件到子元件的資料,子元件通過events給父元件發訊息,以此實現父子元件間的通訊。

如上,在其他元件內部用components宣告元件,即為區域性註冊。

在vue例項中用components註冊元件時,可以理解為vue例項為乙個大的父元件,其他任何註冊的元件都是子元件。所以在註冊元件時,如果要使用vue例項data中的資料,都要用props傳遞vue例項中的資料,讓vue例項的資料在元件中可用。

還可以用v-bind動態繫結props的值到父元件的資料,父元件資料發生變化時,子元件的資料也相應的變化。

vue父子元件之間通訊

1 父元件向子傳遞引數 只需要在子元件內使用props即可獲取。2 子元件返回引數給父元件 子元件中設定 emit func data 父元件中直接取出func即可。注意 父元件向子元件傳參是單向的,若子元件直接修改父元件的引數,vue會報錯。如果需要修改,則有2種方式 方式一 在子元件中複製父變數...

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

最近在學習vue,元件之間的通訊是難點也是重點,所以想稍微總結一下。由於元件的模板無法使用父元件中的資料,所以需要用到props。prop 是你可以在元件上註冊的一些自定義特性。當乙個值傳遞給乙個 prop 特性的時候,它就變成了那個元件例項的乙個屬性。在子元件中註冊了props後,就能將父元件的資...

vue父子元件之間的通訊

一 父元件傳值給子元件 1.子元件,首先定義乙個子元件,然後在子元件中註冊props,然後建立乙個名為infos的屬性,用來接收從父元件傳過來的資料 2.父元件,在父元件中引入子元件,並加入子元件標籤,在子元件標籤中新增子元件props中建立的屬性,將值通過該屬性傳遞給子元件 父元件 二 子元件傳值...