组件基础(插槽slot)—Vue学习笔记

刚开始我们淡淡提过<slot></slot>现在深入了解一下。

slot可以进行父组件传值到子组件。

比如：我们将hiboy通过<slot>传递到组件中。

<body>
    <div id="app">
        <hello>
            Hi boy
        </hello>
    </div>
</body>
<script>
    Vue.component("hello",{
        data:function(){
            return {
                list:[1,2,3,4]
            }
        },
        template:'<p><slot></slot></p>'
    })

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

结果：

当然这不是今天想要讲的。今天我们来分析两种情况。

一、多个插槽传递不同内容

这个时候我们需要设值的关键参数有： slot=' youngam'，name='young' (youngam随便取的，前后一致即可)

例子：我们想要通过两个<slot>分别传递header和footer，<h3>content</h3>作为主要内容区，具体如下代码。

<body>
    <div id="app">
        <hello>
            <div>header</div>
            <div>footer</div>
        </hello>
    </div>
</body>
<script>
    Vue.component("hello",{
        template:`<div>
                    <slot></slot>
                    <h3>content</h3>
                    <slot></slot>
        </div>`
    })

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

错误结果：

大家可以发现header和footer被当作一个插值进行了两次传递，这当然不是我们想要的。

解决方法：

通过定义slot的值 <div slot="header">header</div>

组件中<slot name="header"></slot>

这样在插值时就会找对应的slot进行。

修改后代码：

<body>
    <div id="app">
        <hello>
            <div slot="header">header</div><!--添加slot的值 -->
            <div slot="footer">footer</div>
        </hello>
    </div>
</body>
<script>
    Vue.component("hello",{
        template:`<div>
                    <slot name="header"></slot>    //与上面值对应(运行时删除备注)
                    <h3>content</h3>
                    <slot name="footer"></slot>
        </div>`
    })

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

二、作用域插槽（插槽Dom类型由父组件决定）

关键代码：slot-scope='变量名'

例子：

现在我们的组件中有一个数组，通过v-for遍历到对应li标签中并实现显示。

代码：

<body>
    <div id="app">
        <hello>
        </hello>
    </div>
</body>
<script>
    Vue.component("hello",{
        data:function(){
            return {
                list:[1,2,3,4]
            }
        },
        template:`<div>
                    <ul>
                        <li v-for='item in list'>{{item}}</li>
                    </ul>
                  </div>`
    })

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

结果：

好的，正确显示。

但是，此时的ul和li是固定在组件中的，我们想要通过父组件传递标签实现循环时所显示的是什么标签（此时显示的是<li></li>）

具体做法：将需要传递的标签外面套一层<template slot-scope="随便一个变量名"></template>标签

具体代码：

<body>
    <div id="app">
        <hello>
            <template  slot-scope="youngam">
                <h3>{{youngam.item}}</h3>
            </template>
        </hello>
    </div>
</body>
<script>
    Vue.component("hello",{
        data:function(){
            return {
                list:[1,2,3,4]
            }
        },
        template:`<div>
                    <ul>
                        <slot v-for='item in list' :item=item></slot>
                    </ul>
                  </div>`
    })

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

这里将slot替换成了h3但数据是组件里的。通过变量名.循环单个值的形式可以获取到数据。

结果：

好了，具体类容还是看官方文档吧。

就是这样。

组件基础(插槽slot)—Vue学习笔记

猜你喜欢