Vue高階（六） 元件之間的資料傳遞

2021-08-19 17:51:37 字數 1333 閱讀 4109

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

子元件部分：

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

如果需要從父元件獲取 logo 的值，就需要使用props: ['logo']vue 沒有直接子對子傳參的方法，建議將需要傳遞資料的子元件，都合併為乙個元件。如果一定需要子對子傳參，可以先從子元件傳到父元件，再傳到子元件。

為了便於開發，vue 推出了乙個狀態管理工具vuex（詳參博文《vue高階（五）：與 vuex 的第一次接觸》），可以很方便實現元件之間的引數傳遞。

子元件用props接收父元件傳來的訊息有多種形式：

1.陣列形式

props:


[data1, data2]
陣列形式相當於直接接收訊息，不做任何校驗，一般來說，不太建議使用陣列形式。

2.簡單物件形式

props:
簡單物件形式對父元件傳遞的值進行了型別校驗，如果傳過來的值型別不一致，控制台會報錯。

3.複雜物件形式

props:},


//校驗規則 


data2:


}
複雜物件形式的情況下，作為物件屬性的引數可以寫為物件形式，引數物件含有4個屬性，

【！】 注意那些 prop 會在乙個元件例項建立之前進行驗證，所以例項的屬性 (如 data、computed 等) 在 default 或 validator 函式中是不可用的。

型別檢查

type 可以是下列原生建構函式中的乙個：

額外的，type 還可以是乙個自定義的建構函式，並且通過 instanceof 來進行檢查確認。

例如，給定下列現成的建構函式：

function person (firstname, lastname)
你可以使用：

vue.


component


('blog-post',}


)
來驗證 author prop 的值是否是通過 new person 建立的。

WEB前端 vue學習二 元件之間的資料傳遞

vue 的元件作用域都是孤立的，不允許在子元件的模板內直接引用父元件的資料。必須使用特定的方法才能實現元件之間的資料傳遞。一 父元件向子元件傳遞資料 在 vue 中，可以使用 props 向子元件傳遞資料。子元件部分 這是 header.vue 的 html 部分，logo 是在 data 中定義的...

VUE （9）元件 props資料傳遞

本篇資料來於官方文件 簡單來說，更適合新手閱讀 二十六 props資料傳遞 是孤立的，簡單的來說，元件和元件之間，即使有同名屬性，值也不共享。add del div var vm new vue button data function del button data function script...

VUE （9）元件 props資料傳遞

本篇資料來於官方文件 簡單來說，更適合新手閱讀 二十六 props資料傳遞 是孤立的，簡單的來說，元件和元件之間，即使有同名屬性，值也不共享。add del div var vm new vue button data function del button data function script...