<div id="app">
<div class="p-5">
<h3>插巢 Prop</h3>
<p>將元件內的變數取出使用，稱為 slot prop</p>
<card>
<template #default="slotProps">
{{slotProps}}
</template>
</card>
<hr>
<h2>多個（解構）</h2>
{{ product }}
<card2 :product="product">
<template #default="{product,veganName='如果slot沒有傳出veganName變數時會使用此預設字串'}">
{{product}} {{veganName}}
</template>
</card2>
</div>
</div>
const app = Vue.createApp({
data() {
return {
product: {
name: '蛋餅',
price: 30,
vegan: false
}
}
},
});
app.component('card', {
data() {
return {
product: {
name: '蛋餅',
price: 30,
vegan: false
},
product2:{
name: '蔥抓餅',
price: 80,
vegan: true
}
}
},
template: `<div class="card" style="width: 18rem;">
<div class="card-body" >
<slot :pd1="product" :pd2="product2"></slot>
</div>
</div>`
});
app.component('card2', {
props: ['product'],
data() {
return {
veganName: ''
}
},
created() {
console.log()
this.veganName = this.product.vegan ? '素食' : '非素食';
},
template: `<div class="card" style="width: 18rem;">
<div class="card-body" >
<slot :product="product" :veganName="veganName"></slot>
</div>
</div>`
})
app.mount('#app');
