天天看點

Vue父子元件通信

我們在開發過程中,不可能隻在一個元件裡面寫東西,當一個元件的内容過多時候,我們會把各個塊的内容分别作為一個單獨的元件分離出去,這些分離出去的元件被叫做子元件,但是一般請求資料的話還是在父元件(最大的外層中)鐘情求,這就要求我們要将父元件中的資料傳給各個子元件,子元件才能通過v-for指令進行周遊,周遊之後再通過item将資料傳給比自己更小的子元件,這樣以此類推,最後的小元件再來展示資料,元件開發中不可能因為某個小元件而單獨發一次請求,這就需要用到元件之間的通信

通常情況下子元件是不能直接通路父元件或者Vue執行個體中的資料的,但是在開發中,往往有一些資料确實需要從上層傳遞到下層:比如在一個頁面中,我們從伺服器請求到了很多資料,其中一部分資料并非使我們整個大頁面元件來展示的,而是需要下面的子元件進行展示,這個時候并不會讓子元件再次發送一次網絡請求,而是直接讓大元件(父元件)将資料傳遞給小元件(子元件)

官方給出的方法

父元件通過props給子元件傳遞資料

<子元件标簽 :子元件的props屬性 = "父元件的data變量" /> </子元件标簽>

子元件通過自定義事件給父元件發送消息

Vue父子元件通信
Vue父子元件通信

真實開發中 ,Vue執行個體和子元件的通信 與 父元件和子元件的通信過程是一樣的vue執行個體本身可以看做父元件

子元件中props的資料驗證

在子元件中 props可以是數組,也可以是對象,當需要對props進行類型驗證時,就需要使用對象文法了,對象的好處的是可以指定必須傳過來的資料類型,在開發中很少用數組的寫法