在Vue中，父組件和子組件之間的關系可以概括為道具向下傳遞和事件向上傳遞。父組件通過props向子組件發送數據，子組件通過事件向父組件發送消息。看看它們是如何工作的。
壹。基本用法
組件不僅應該重用模板的內容，還應該相互通信。
在組件中，使用選項props聲明需要從父級接收的數據。道具的值可以是兩種，壹種是字符串數組，另壹種是對象。
1.1字符串數組:
& ltp id =“app 4“& gt。
& ltMy-component4 message=“數據來自父組件“》& lt/my-component 4 & gt；
& lt/p & gt；
vue . component（‘my-component 4‘，{
道具:【‘消息‘】，
模板:“& ltp & gt{ { message } } & lt/p & gt；‘
});
var app4 =新Vue （{
艾爾:“#app4”
});渲染後的結果是:
& ltp id =“app 4“& gt。
& ltp》來自父組件的數據
& lt/p & gt；props中聲明的數據與組件數據函數return的數據的主要區別是props來自父級，而數據是組件本身的數據，範圍是組件本身。這兩種數據都可以在模板、計算屬性和方法中使用。
上例中的數據消息是通過props從父節點傳遞的。將道具的名稱直接寫在組件的自定義標簽上。如果要傳遞多個數據，只需在props數組中添加壹個項目。
有時，傳遞的數據不是直接寫入的，而是來自父級的動態數據。此時可以使用指令v -bind動態綁定props的值，當父組件的數據發生變化時，也會傳遞給子組件。
& ltp id =“app 5“& gt。
& lt輸入type =“text“v-model =“text“& gt。
& ltmy-component 5:my-text =“text“& gt；& lt/my-component 5 & gt；
& lt/p & gt；
vue . component（‘my-component 5‘，{
道具:【‘my text‘】，
模板:“& ltp & gt{ { myText } } & lt/p & gt；‘
});
var app5 =新Vue （{
艾爾:“#app5”，
數據:{
文本:“動態傳遞父組件數據”
}
});需要註意幾點:
1.如果妳想直接傳遞數字、布爾值、數組和對象，而妳沒有使用v-bind，妳只能傳遞字符串。
2.如果要將對象的所有屬性作為prop傳遞，可以使用不帶任何參數的v-bind（即使用v-bind而不是v-bind:prop-name）。例如，已知壹個todo對象:
1.2對象:
當需要驗證prop時，需要編寫對象。
通常，當您的組件需要提供給其他人時，建議驗證數據。例如，某個數據必須是數字類型的，如果傳入壹個字符串，控制臺上會彈出壹個警告。
& ltp id =“app 6“& gt。
& lt輸入type =“text“v-model =“number“& gt。
& ltmy-component 6:my-text =“number“& gt；& lt/my-component 6 & gt；
& lt/p & gt；
vue . component（‘my-component 6‘，{
道具:{
我的文本‘:{
類型:數字，//必須是數字。
必需:true，//您必須傳遞壹個值。
默認值:1 //如果未定義，則默認值為1。
}
},
模板:“& ltp & gt{ { myText } } & lt/p & gt；‘
});
var app6 =新Vue （{
艾爾:“#app6”，
數據:{
貨號:1
}
});驗證的類型可以是:
線
數字
布爾代數學體系的
目標
排列
功能
類型也可以是使用instanceof檢測的自定義構造函數。
在開發版中，當prop驗證失敗時，控制臺上會顯示警告。
第二，單向數據流
Vue 2.x和Vue l.x之間的壹個很大的變化是Vue2.x通過props傳輸的數據是單向的，即當父組件的數據發生變化時，它將被傳輸到子組件，而不是相反。
在商業中有兩種情況需要更換道具。
2.1壹種是父組件傳入初始值，子組件將其保存為初始值，可以在自己的範圍內隨意使用和修改。（Prop作為初始值傳入，子組件希望將其用作本地數據；)
在這種情況下，您可以在組件數據中聲明另壹個數據，引用父組件的屬性。示例代碼如下:
& ltp id =“app 7“& gt。
& ltmy-component 7:init-count =“1“& gt；& lt/my-component 7 & gt；
& lt/p & gt；
vue . component（‘my-component 7‘，{
道具:【initCount】，
模板:“& ltp & gt{ { count } } & lt/p & gt；‘,
數據:函數（）{
返回{
計數:this.initCount
}
}
});
var app7 =新Vue （{
艾爾:“#app7”
});數據c ount是在組件中聲明的，它會在組件初始化時從父組件中獲取initCount，然後與它無關，只需維護c ount即可，這樣可以避免直接操作initCount。
2.2prop作為需要轉換的原始值傳入。（Prop作為原始數據傳入，由子組件處理為其他數據輸出。)
在這種情況下，計算屬性就足夠了。示例代碼如下:
& ltp id =“app 8“& gt。
& ltmy-component 8:width =“100“& gt；& lt/my-component 8 & gt；
& lt/p & gt；
vue . component（‘my-component 8‘，{
道具:【‘寬度‘】，
模板:“& ltp:style =“style“& gt；成分含量
計算值:{
style:function（）{
返回{
寬度:this . width+‘px‘
}
}
}
});
var app8 =新Vue （{
艾爾:“#app8”
});註意在JavaScript中，對象和數組是引用類型，指向同壹個內存空間。如果prop是壹個對象或數組，在子組件中更改它將影響父組件的狀態。
相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上的其他相關文章！
推薦閱讀:
Vue有哪些包裝優化方法？
解決雙擊和單擊事件之間的沖突