vue元件之間資料的傳遞
簡單一點, 把根元件作為父元件。
1.1.1. 父子之間不能正常共享資料的
1.1.2. 父元件把資料傳遞給子元件:步驟
步驟:
1.1.2.1. 在父元件中,正常定義自己的資料。
1.1.2.2. 在父元件的模板中通過屬性繫結把資料繫結到子元件上。
1.1.2.3. 在子元件中定義props屬性。用來接收父元件傳遞的資料。
在props中定義的屬性,是專門用來從父元件中去獲取資料的,定義好了之,就可以像定義在data中的資料項一樣,去正常的使用。
1.1.2.4. 在子元件模板中使用資料
1.1.2.5. 在子元件中的函式中使用資料
1.1. 父傳子有一個核心 子元件中的props配置項
1.1.1. 父子傳遞,講究”你情我願”
根元件中:明確地給子元件傳遞資料
子元件中:要通過props明確宣告,我要資料
1.1.2. Props
詳細的格式:
每一個數據項,都可以加三個屬性設定來修飾它。
Props:{
資料項名字:{
type:型別。指明從父元件中傳遞過來的資料必須是什麼型別。它的取值是:Object,Array,String,Number,Boolean 都是構造器。不要寫成字串。
default://預設值。當父元件沒有傳資料時,就用這個值。
required:true/false 。是否必須一定要傳遞過來。
}
}
1.1.3. 常見的props格式:
props: {
// 基礎型別檢測
propA: Number,
propB: [String, Number],// 多種型別
propC: {
type: String,// 必傳且是字串
required: true
},
propD: {
type: Number,
default: 100 // 數字,有預設值
},
// 陣列/物件的預設值應當由一個函式返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
}
}
1.1.4. 型別必須要一致
這裡需要Number,如果不是Number就報錯。
1.1.5. 預設值
上面的程式碼中,是給了值的。所以就會用給了的值。
1.1.6. Require:true 必傳項
1.2. 你不能在子元件中修改父元件傳遞的資料
解決方法:
在子元件中,接收父元件傳遞的資料之後,你可以用這個資料對自已子元件中定義的資料項去做初始化,然後,你就可以去自己自己在子元件中定義的資料。