vue3基础入门--具名查插和作用域插槽

最新推荐文章于 2024-09-10 09:26:22 发布

小小婷几

最新推荐文章于 2024-09-10 09:26:22 发布

阅读量127

点赞数

分类专栏： VUE3学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40128375/article/details/122810386

版权

VUE3学习笔记专栏收录该内容

15 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://unpkg.com/vue@next"></script>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script>
        const app = Vue.createApp({
            template:`
                <div>
                    <hello-world>
                        默认
                        <template v-slot:header>头部</template>
                        <template #footer>底部:#footer是缩写</template>
                    </hello-world>

                    <List v-slot="{ item }">
                        <li>解构的item:{{ item }}</li>    
                    </List>
                </div>
            `,
        })
        // 1. 具名插槽
        app.component('HelloWorld', {
            template:`
                <div>
                    <slot name="header">Header</slot>
                    <slot> default </slot>
                    <slot name="footer">Footer</slot>
                </div>
            `,
        })
        // 2. 作用域插槽
        app.component('List', {
            template:`
                <div>
                    <slot v-for="item in list" :item="item" />
                </div>
            `,
            data() {
                return{
                    list: [1, 2, 3]
                }
            }
        })
        app.mount('#root');
    </script>
</body>
</html>