普通插槽和具名插槽

 var app = Vue.createApp({  
            template:`<div>
                <myform>
                    <div>提交</div>    
                </myform>
                <myform>
                    <button @Click="handleClick"> 提交</button>
                </myform>
                <myform> </myform>
            </div>`,
        })

        app.component('myform',{  
            methods:{
                handleClick(){
                    alert(123)
                }
            },
            template:` <div >
                <input />
                <span @click="handleClick">
                    <slot>
                        default value
                    </slot>
                </span>

            </div> `
        })

-------------具名插槽-------------

var app = Vue.createApp({  
            template:`
                <layout>

                   //  <template  v-slot:header>
　　　　　　// 简写
                    <template  #header>

                        <div>header</div>    
                    </template>

                    <template  #footer>
                        <div>footer</div>    
                    </template>
                </layout>
            `,
        })

        app.component('layout',{    
            template:` <div >
                        <slot name="header"></slot>
                        <div>content</div>
                        <slot name="footer"></slot>
                    </div>
                    `
        })