作用域插槽

最新推荐文章于 2024-08-01 23:12:12 发布

@huihui_new

最新推荐文章于 2024-08-01 23:12:12 发布

阅读量80

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_52544128/article/details/114089638

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 20</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    //slot 插槽
    //父模版里调用的数据属性，使用的都是父模版里的数据
    //子模版里调用的数据属性，使用的都是父模版里的数据
    //slot默认值设定
    //具名插槽的定义 v-slot:'name' v-slot可简写为#
    //作用域插槽
    const app = Vue.createApp({
        data() {
            return {
                text:'提交'
            }
        },
        template:`
            <layout v-slot="slotProps">
                <span>{{slotProps.item}}</span>
            </layout>
            <layout v-slot="{item}">
                <div>{{item}}</div>
            </layout>
        `
    });
    app.component('layout',{
        data(){
            return {list:[1,2,3]}
        },
        template:`
            <div>
                <slot v-for="item in list" :item="item"></slot>
            </div>
        `
    });
    app.mount('#root');
</script>
</html>

@huihui_new

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作用域插槽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 20</title> <script src="https://unpkg.com/vue@n
复制链接

扫一扫