<body>
<div id="app">
<!-- 組件的變量名不能有大寫 會報錯 -->
<cpn :cmessage="message" :clis="lis"></cpn>
</div>
<template id="cpn">
<div>
<p> {{ cmessage }} </p>
<ul>
<li v-for="i in clis"> {{ i }} </li>
</ul>
</div>
</template>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
// 父傳子 props 可以寫數組類型、 對象類型
Vue.component('cpn', {
template: "#cpn",
// 數組類型 寫法如下
//props: ['cmessage', 'clis'], //把數組元素看作是一個變量 然后在使用組件的時候 動態綁定父組件屬性 把父組件的值給到子組件
// 對象類型 寫法：
props: {
cmessage: {
type: String, // 類型限制
default: "lalalla", //默認值 使用組件的時候 沒有動態綁定 父組件屬性時 顯示的內容
},
clis: {
type: Array, // 類型是數組或對象時 默認值必須是一個函數
default () {
return [];
}
}
},
data() {
return {
}
}
})
const app = new Vue({
el: '#app',
data: {
message: "好好學習",
lis: ['榴蓮', '龍眼', '荔枝', '菠蘿']
}
})
</script>
</body>
