Vue中对于插槽的理解

最新推荐文章于 2022-05-08 17:15:45 发布

小朱要努力

最新推荐文章于 2022-05-08 17:15:45 发布

阅读量224

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45129940/article/details/107334850

版权

Vue的插槽分为三种插槽，匿名插槽、具名插槽、作用域插槽

**
第一种是匿名插槽：
匿名插槽的使用方法比较简单粗暴，直接在子组件中进行使用，然后运用到template模板当中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <child></child>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("child", {
            template: `<div>
                            <slot><h1>123</h1></slot>
                        </div>`
        })
        const vm = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

第二种是具名插槽，顾名思义就是给插槽起了个名字，这样做的好处就是当我们想要使用插槽在页面中显示上中下布局块的时候就可以使用具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <child>
            <div class="header" slot="header"><h1>header</h1></div>
            <div class="footer" slot="footer"><h1>footer</h1></div>
        </child>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("child", {
            template: `<div>
                        <slot name="header"></slot>
                        <div class="content"><h1>content</h1></div>
                        <slot name="footer"></slot>
                        </div>`
        })
        const vm = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

第三种也是最重要和常用的一种，作用域插槽，作用域插槽可以让父组件接收和使用子组件在slot声明的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <child>
            <!---父组件使用的时候要用template标签进行使用-->
            <template slot-scope="props">
                {{ props.item }}
            </template>
        </child>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("child", {
            data: function() {
                return {
                    list: [1, 2, 3, 4]
                }
            },
            //这里的子组件template模板绑定了item属性让父组件进行使用
            template: `<ul>
                           <slot v-for="item of list" :item=item></slot> 
                       </ul>`
        })
        const vm = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

小朱要努力

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中对于插槽的理解

**Vue的插槽分为三种插槽，匿名插槽、具名插槽、作用域插槽**第一种是匿名插槽：匿名插槽的使用方法比较简单粗暴，直接在子组件中进行使用，然后运用到template模板当中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫