# Slot Props 插巢傳遞資料狀態 (4-8)
###### tags: `Vue`、`4. 元件`
2022.3.7

### 1. 將元件內的變數取出使用

<oldmoon>
    <template #default="slotProduct">
        產品名稱 : {{slotProduct.product.name}}<br>
        產品價格：{{slotProduct.product.price}}<br>
        是否為可素食：{{slotProduct.product.vegan}}<br>
    </template>
</oldmoon>

<script>
        const app = Vue.createApp({
            data(){
                return{
                    text:'這是內部資料'
                }
            }
        });

        app.component('oldmoon',{
            data(){
                return{
                    product:{
                        name:'玉米蛋餅',
                        price:30,
                        vegan:false
            }}},
            template:`<h2><slot :product="product"></slot></h2>`

        });

        app.mount('#app');
</script>

### 2. 將外層變數傳入元件，再透過Slot傳出

<oldmoon :product = "product">
    <template #default="{product,vegan,test='可放預設值'}">
        產品名稱 : {{product.name}}<br>
        產品價格：{{product.price}}<br>
        是否為可素食：{{vegan}}<br>
        當內部沒傳遞變數時，{{test}}
    </template>
</oldmoon>

<script>
    const app = Vue.createApp({
            data(){
                return{
                    product:{
                        name:'玉米蛋餅',
                        price:30,
                        vegan:false
    }}}});

    app.component('oldmoon',{
        data(){
                return{
                        vegan:''
                      }
             },

        props:['product'],

        created(){
                this.vegan = this.product.vegan?'是素食':'不是素食'
        },
            
        template:`<h2><slot :product="product" :vegan="vegan"></slot></h2>`
    });

    app.mount('#app');
</script>