技術標籤：vue

......
<script>
    /*
    * 插槽小結:
    * 幫助解決元件間內容傳遞問題
    * 1.solt - 插槽
       注意：slot沒有辦法直接繫結事件
       父元件往子元件中傳遞一些dom節點，元素標籤時，沒必要通過屬性去傳遞，可以使用插槽的方式，插槽中也可以傳入字串、元件等等
       父模板裡呼叫的資料屬性，使用的都是父模板裡的資料
       子模版裡呼叫的資料屬性，使用的都是子模版裡的資料
       未傳遞給插槽部分的內容時，則會呼叫插槽部分的預設值

    * 2.具名插槽--通過name屬性實現
       v-slot語法不能直接放在標籤上，可以用在 components or <template>
       <template v-slot:header>  v-slot:header--可以簡寫為#header

    * 3.作用域插槽
    *如下：
       父元件呼叫子元件list,傳遞給了子元件一個solt
       在子元件中迴圈內容時呼叫了這個slot，同時把item的資料傳給slot
       slot接收v-slot='slotProps' slotProps-所有傳遞過來的內容都通過slotProps資料物件接收

       作用域插槽解決的問題：
       當子元件渲染的內容由父元件決定時，通過插槽寫法，能夠讓父元件去呼叫子元件item裡的資料，父元件裡直接寫item不行，
       因為它只能從父元件作用域裡找item資料，找不到無法顯示，通過作用域插槽，能夠把父元件的item資料從子元件傳遞過來，
       便於父元件呼叫。

    * */
 

    const app = Vue.createApp({
        template:`
            <div>
                <div>1.預設插槽示例</div>
                <test>
                    {{text}}
                    <div>提交</div>
                </test>
                <test/>
                <div>2.具名插槽示例</div>
                <test1>
                    <template v-slot:header>
                        具名插槽--v-slot:name 寫法
                    </template>
                    <template #footer>
                        具名插槽 -- #簡寫
                    </template>
                </test1>
                <div>3.作用域插槽示例</div>
                <test2>
                    <template v-for="item in list">
                        {{item}}
                    </template>
                </test2>
                <test2>
                    <template v-slot="slotProps">
                        <div>父元件中呼叫子元件{{slotProps.item}}</div>
                    </template>
                </test2>
            </div>
        `
 
,
        data(){
            return{
                text:' <div>給插槽傳值時</div>',
                list:['父1','父2','父3']
            }
        },
        created(){
        },
        methods:{}
    })
    app.component('test',{
        template: `
            <div>
                <div>預設插槽</div>
                <slot>沒有傳值時將使用其預設值{{text}}</slot>
            </div>
        `
 
,
        data(){
            return{
                text:'defaultValue'
            }
        }
    })
    app.component('test1',{
        template: `
            <div>
                <slot name="header">具名插槽--頭部</slot>
                <div style="margin-top: 20px">具名插槽</div>
                <slot name="footer">具名插槽-底部</slot>
            </div>
        `,
        data(){
            return{
                text:'defaultValue'
            }
        }
    })
    app.component('test2',{
        template: `
            <div>
                <div style="margin-top: 20px">作用域插槽</div>
                <slot v-for="item in list" :item="item">預設值{{item}}</slot>
            </div>
        `,
        data(){
            return{
                text:'defaultValue',
                list: ['子1','子2','子3']
            }
        }
    })

    const vm = app.mount('#root')
</script>
......