vvv,具名插槽

Posted ZKJABLE

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

以上是关于vvv,具名插槽的主要内容，如果未能解决你的问题，请参考以下文章

Vue2.x 插槽slot学习笔记

具名插槽作用域插槽的新写法

Vue—解构插槽 Prop以及具名插槽的缩写

Vue2.0—默认插槽具名插槽作用域插槽（二十四）

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化