vvv,具名插槽

<!DOCTYPE html>
<html>
    <head>
        
        <script src="a.js"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
<script>

const app = Vue.createApp({
    template:`
    <layout>
        <template v-slot:header>
            <div>header</div>
        </template>
        <template v-slot:footer>
            <div>footer</div>
        </template>
    </layout>
    `
})
app.component('layout',{
    template:`
        <div>
            <slot name="header"></slot>
            <div>content</div>
            <slot name="footer"></slot>
        </div>
    `
})
const vm = app.mount('#root')
</script>
</html>
原文地址:https://www.cnblogs.com/lfhphp/p/14890059.html