普通插槽和具名插槽

 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>

                    `

        })