slot插槽小结

......
<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>
......