vue插槽slot的默认插槽、具名插槽与作用域插槽的用法

最新推荐文章于 2023-08-10 10:01:07 发布

城南花开ze

最新推荐文章于 2023-08-10 10:01:07 发布

阅读量2k

点赞数 1

分类专栏： Vue 文章标签： vue 插槽slot 默认插槽具名插槽作用域插槽

本文链接：https://blog.csdn.net/weixin_42614080/article/details/103724472

版权

Vue 专栏收录该内容

128 篇文章 21 订阅

订阅专栏

一、vue的插槽slot

在vue的开发当中，我们可能也经常会使用插槽slot，父组件给子组件传递DOM元素。插槽的实质，实际上是对于子组件的扩展，通过slot插槽向组件内部指定位置传递内容，也是承载内容分发的出口。在这里，以默认插槽、具名插槽和作用域插槽进行总结说明。

二、vue的默认插槽

1. 默认插槽的说明：

默认插槽相当于是在子组件中写明插槽的内容，当父组件在使用子组件的时候，同时父组件没有指定插槽的内容时，那么就使用子组件定义的默认插槽的内容。

2. 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>默认插槽</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="app">
        <child></child>
    </div>

    <script>

        Vue.component('child', {
            template: `<div>
                            <slot>默认内容</slot>
                        </div>`
        })
    
        var vm = new Vue({
            el: "#app"
        });
    
    </script>
    
</body>
</html>

三、vue的具名插槽

1. 具名插槽的说明：

具名插槽相当于是在子组件的插槽中给slot添加name属性，进行命名，在父组件需要使用到插槽的地方，给slot添加之前的命名。这样，可以实现向多个组件内部指定位置传递指定的内容。

2. 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>具名插槽</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">
        <child>
            <div class="header" slot="header">header</div>
            <div class="footer" slot="footer">footer</div>
        </child>
    </div>

    <script>
        Vue.component('child', {
            template: `<div>
                        <slot name="header">默认内容</slot>
                        <div class="content">content</div>
                        <slot name="footer">默认内容</slot>
                    </div>`
        });

        var vm = new Vue({
            el: "#app"
        });
    
    </script>

</body>
</html>

四、vue的作用域插槽

1. 作用域插槽的说明：

作用域插槽相当于是子组件的DOM结构由外部传递过来，而使用作用域插槽，子组件可以向父组件传递数据，父组件以template模版，通过 slot-scope="props" 进行接收数据，props.item就是传递过来的数据。

2. 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue的作用域插槽</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">
        <child>
            <template slot-scope="props">
                <h3>{{ props.item }}</h3>
            </template>
        </child>
    </div>

    <script>

        Vue.component('child', {
            data: function(){
                return {
                    list: [21,22,24,43,29,2,33]
                }
            },
            template: `<div>
                            <ul>
                                <slot v-for="item of list" :item=item></slot>
                            </ul>
                        </div>`
        });


        var vm = new Vue({
            el: "#app"
        });
    
    </script>

</body>
</html>

城南花开ze

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue插槽slot的默认插槽、具名插槽与作用域插槽的用法

一、vue的插槽slot在vue的开发当中，我们可能也经常会使用插槽slot，父组件给子组件传递DOM元素。插槽的实质，实际上是对于子组件的扩展，通过slot插槽向组件内部指定位置传递内容，也是承载内容分发的出口。在这里，以默认插槽、具名插槽和作用域插槽进行总结说明。二、vue的默认插槽1. 默认插槽的说明：默认插槽相当于是在子组件中写明插槽的内容，当父组件在使用子组件的时候，同时父组件没...
复制链接

扫一扫

专栏目录