有关于vue.js中作用域插槽的新用法

最新推荐文章于 2024-06-01 21:28:55 发布

小庄梦蝶

最新推荐文章于 2024-06-01 21:28:55 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/weixin_43591127/article/details/115794509

版权

看例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script SRC="../js/vue.js" type="text/javascript"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn>
        <!--作用域插槽写法-->
        <template v-slot:languages="slot">
            <span v-for="item in slot.data">《 {{item}} 》</span>
        </template>
    </cpn>
</div>
<template id="cpn">
    <div>
        <slot name="languages" :data="languages">
            <ul>
                <li v-for="item in languages">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

</body>
<script>
    const app=new Vue({
        el: '#app',
        data: {},
        components:{
            cpn:{
                template:`#cpn`,
                data(){
                    return{
                        languages:['javascript','c++','java','python','go','swift']
                    }
                }
            }
        }
    });
</script>
</html>

上面的

<template v-slot:languages="slot">
            <span v-for="item in slot.data">《 {{item}} 》</span>
</template>

就是新写法，父组件用子组件的数据
其中slot是任意的，可以理解是接收子组件数据一个变量名，languages是插槽名，如果去掉=“slot”,它就是v-slot的新用法，也就是具名组件，具名组件故名思意就在模板template中有插槽slot，其有属性name=“xxx”，html中要使用对应的插槽，就得使用

<template v-slot:插槽名>
     
</template>

上面这个也是新用法
看了那么多同行写的真心看不懂在写啥，只能自己写，希望对大家有帮助

小庄梦蝶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫