vue3 插槽

   <div >
        <my-component>abc</my-component>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
        });
        app.component('my-component', obj.btn1)
        const vm = app.mount('#vm');
    </script>

const btn1 = {

    template: `    
    <div class="demo-alert-box">
    <strong>Error!</strong>
    <slot></slot>
  </div>`,
}
export { btn1 }

        <div >
            <my-component>ccc</my-component>
        </div>
        <script type="module">
            import * as obj from './main.js'
            const app = Vue.createApp({
            });
            app.component('my-component', obj.btn1)
            const vm = app.mount('#vm');
        </script>

const btn1 = {
    template: `    
    <div class="demo-alert-box">
    <strong>Error!</strong>
    <slot>abc</slot>
  </div>`,
}
export { btn1 }

    <div >
        <my-component>
            <template v-slot:header>
                <h1>Here might be a page title</h1>
            </template>
            <template v-slot:default>
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
            </template>
            <template v-slot:footer>
                <p>Here's some contact info</p>
            </template>
        </my-component>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
        });
        app.component('my-component', obj.btn1)
        const vm = app.mount('#vm');
    </script>

const btn1 = {

    template: `    
    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
  `,
}
export { btn1 }