在父元件與子元件中，為了實作父子元件之間的通信，需要使用props，來實作父元件中的内容被子元件所使用。在子元件中使用props來進行與父元件之間的通信。
在使用元件時通過綁定props中定義的變量與父元件中的屬性，實作父元件的屬性傳遞到子元件，子元件就可以使用父元件的屬性了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父傳子元件props</title>
</head>
<body>
<div id="app">
<cpn :c-foods="foods" :c-message="message"></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for="item in cFoods">{{item}}</li>
</ul>
<h2>{{cMessage}}</h2>
</div>
</template>
<script src="js/vue.js"></script>
<script>
const cpn = {
template: '#cpn',
props: {
'cFoods': {},
'cMessage': {}
},
data() {
return {};
}
}
const app = new Vue({
el: '#app',
data: {
foods: ['回鍋肉', '糖醋裡脊', '魚香肉絲', '糖醋鯉魚'],
message: '歡迎來到本系統'
},
components: {
cpn
}
})
</script>
</body>
</html>
對于props來說，可以對其進行類型限制、提供預設值
類型限制
props: {
'cFoods': Array,
'cMessage': String
}
提供預設值
'cMessage': {
type: String,
default: '1234567'
}
必須傳值
'cMessage': {
type: String,
default: '1234567',
required: true
}
類型為對象或數組
當類型為對象(Object)或者數組(Array)時，預設值必須為函數，否則會報錯
'cMessage': {
type: Array,
default() {}
}
當props中的變量使用駝峰命名法時，在調用元件時，若使用駝峰命名法進行綁定時，系統不會識别，是以在調用元件時，綁定時使用“-”。
<div id="app">
<cpn :c-foods="foods" :c-message="message"></cpn>
</div>
props: {
'cFoods': Array,
'cMessage': {
type: Array,
default() {}
}
![Vue基礎Vue 筆記模版周期父子元件slot插槽引入其他頁面雙向綁定混入[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)