31.Slot作用域插槽

最新推荐文章于 2023-06-22 21:26:04 发布

@司马懿

最新推荐文章于 2023-06-22 21:26:04 发布

阅读量377

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/119809772

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

组件作用域

1.就是父组件与子组件各在data中定义一个相同的字段flag；
2.在VM数据时，只会访问各自的data，这就是作用域；

作用域插槽

两句话概括：
1.父组件替换插槽的标签，但是内容由子组件来提供；
2.插槽不仅可以让标签作为共同性，也可以让数据作为共同性传递出去；

用需求来进一步指明slot作用域插槽

1.子组件中包括一组数据，比如：planguage:['js',’python‘,'c++','java']
    2.需要再多个界面进行展示：
        a.某些界面是以水平方向-展示的；
        b.某些界面是以列表形式展示的；
        c.某些界面是直接展示一个数据；
    3.内容在子组件，希望父组件告诉我们如何展示？利用slot作用域插槽

如图所示，如果用按照一般的slot进行引用，只会得到红框框的列表数据，

但是通过slot作用插槽，进行获取子组件的数据，进行多样化展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <chilrderhtml></chilrderhtml>
    <chilrderhtml>
        <!--目的是获取子组件中的数组-->
        <!--vue2.5以下要想使用子组件的数组，必须使用template标签-->
        <template slot-scope="slot">
            <span v-for="item in slot.data">{{item}}</span>
        </template>
    </chilrderhtml>
</div>

<template id="chilrderhtml">
    <div>
        <!--data这个是自定义，随便取的-->
        <slot :data="planguages">
            <ul>
                <li v-for="item in planguages">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            chilrderhtml: {
                template: '#chilrderhtml',
                data() {
                    return {
                        planguages: ['js', 'python', 'c++', 'java']
                    }
                }
            }
        }

    });

</script>

</body>
</html>

@司马懿

关注

0
点赞
踩
0

收藏

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

组件作用域1.就是父组件与子组件各在data中定义一个相同的字段flag； 2.在VM数据时，只会访问各自的data，这就是作用域；作用域插槽两句话概括： 1.父组件替换插槽的标签，但是内容由子组件来提供； 2.插槽不仅可以让标签作为共同性，也可以让数据作为共同性传递出去；用需求来进一步指明slot作用域插槽 1.子组件中包括一组数据，比如：planguage:['js',’python‘,'c++','java'] 2....
复制链接

扫一扫