（六）Vue插槽slot 编译作用域作用域插槽

肥钛狼

已于 2022-03-20 18:36:23 修改

阅读量225

点赞数

分类专栏：前端文章标签： javascript vue.js

于 2021-08-25 16:42:31 首次发布

本文链接：https://blog.csdn.net/weixin_43665351/article/details/119914647

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本使用

1、插槽不添加任何内容，只占用位置，使用时添加
2、插槽做有内容，当使用插槽时，会被覆盖
3、插槽中有多个插槽，一并添加使用
4、具名插槽（根据插槽名字进行替换）

<html>
    <header>
        <title>Title</title>
    </header>
    <body>
        <div id="app">
            <cnp>
                <h1 slot="p">按钮</h1>
            </cnp>
        </div>

        <template id="cnp">
            <div>
                <h2>这是一个组件</h2>
                <slot name="p"><p>p标签</p></slot>
                <slot name="name"><span>span标签</span></slot>
                <slot name="button"><p>子组件按钮</p></slot>
            </div>
        </template>

        <script src="../vue.js"></script> 
        <script>
            const app =  new Vue({
                el: '#app',
                data: {
                    firstName: "Kone",
                    lastName: "Bula" 
                },
                components: {
                    cnp: {
                        template: "#cnp",
                    }
                }
            })
        </script>
    </body>
</html>

编译作用域

在模版中调用的时候，使用模版下的参数（vue实例下的参数或者父模版下参数），当使用在组件里时，使用的是组件下的参数。

作用域插槽

作用：父组件调用子组件，但是对子组件展示的方式不满意，要进行自定义，但是使用的是子组件的数据。
原理: 子组件使用插槽(slot)包裹，并且在slot上使用v-bind定义关联对应的数据（例：v-bind:data=“XXXX”），在父组件使用时，使用slot-scope=“slot”生成slot对象。获取数据slot.data（注意：使用时vue版本在2.5.X以前都要使用template进行包裹）

<html>
    <header>
        <title>Title</title>
    </header>
    <body>
        <div id="app">
            <cnp>
                <!-- 组件中调用 -->
                <slot slot-scope="slot">
                    <h1 v-for="item in slot.data">{{item}}</h1>
                </slot>
            </cnp>
        </div>

        <template id="cnp">
            <div>
                <h2>子组件</h2>
                <!-- 子组件中数据 -->
                <slot :data="fruit">
                    <ul>
                        <li v-for="item in fruit">{{item}}</li>
                    </ul>
                </slot>
            </div>
        </template>
        
        <script src="../vue.js"></script>
        <script>
            const app =  new Vue({
                el: '#app',
                data: {
                    firstName: "Kone",
                    lastName: "Bula" ,
                },
                components: {
                    cnp: {
                        template: "#cnp",
                        data() {
                            return {
                                fruit:["🍎","🍇","🍉"]
                            }
                    },
                    },
                }
            })
        </script>
    </body>
</html>