子元件是不能引用父元件或者vue例項的資料的,但是在開發中,往往一些資料確實需要從上層傳遞到下層:
1.比如在乙個頁面中,我們從伺服器請求到了很多的資料
2.其中一部分的資料,並非是我們整個頁面的大元件來展示的,而是需要下面的子元件進行展示
3.這個時候,並不會讓子元件再次傳送乙個網路請求,而是直接讓大元件(父元件)將資料傳遞給小組件(子元件)
如何進行父子元件間的通訊呢?vue官方提到:
1.通過props向子元件傳遞資料
2.通過事件向父元件傳送訊息(自定義事件emit)
在真實開發中,vue例項和子元件的通訊和父元件和子元件的通訊過程是一樣的
在元件中,使用選項props來宣告需要從父級接收到的資料。
props的值有兩種方式:
方式一:字串陣列,陣列中的字串就是傳遞時的名稱
方式二:物件,物件可以設定傳遞時的型別,也可以設定預設值等
除了陣列之外,也可以使用物件,當需要對props進行型別驗證時,就需要物件寫法了。
驗證都支援哪些資料型別呢?
string
number
boolean
array
object
date
function
symbol
當我們有自定義的建構函式時,驗證也支援自定義型別
栗子:
}
想用駝峰標識就要用「 - 」隔開: :c-info=「info」 :child-message=「message」
父子元件通訊 父傳子props
在父元件與子元件中,為了實現父子元件之間的通訊,需要使用props,來實現父元件中的內容被子元件所使用。在子元件中使用props來進行與父元件之間的通訊。在使用元件時通過繫結props中定義的變數與父元件中的屬性,實現父元件的屬性傳遞到子元件,子元件就可以使用父元件的屬性了。lang en char...
vue 父子通訊 父傳子詳解
元件之間的通訊 元件是vuejs強大的功能,元件例項中的作用域是相互獨立的,這就說明不同元件之間的資料是無法通訊的。根據元件中資料的傳遞方向,可以分為父元件向子元件傳遞資料和子元件向父元件傳遞資料,這是最常見的和最常用的。這兩中傳資料的方向是通過props refs和 emit來實現的。父元件向子元...
vue 父子元件傳值(父傳子)
在專案中經常會用到傳值的情況,今天說下父傳子的傳值方法 父元件使用 v model 繫結,並在標籤裡傳值,引入子元件 v model radio change changemax v model addcaglabel v for item in radiopay key item.value la...