vue 插槽理解

vue 插槽理解

1. 插槽使用

插槽中可以设置任意内容，观察下面的代码：
声明一个child-component组件，并在

<child-component></child-component>

内放置内容，结果怎样？

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

</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

<child-component>你好</child-component>

输出内容还是在组件中的内容，在 <child-component>内写的内容没起作用。

我们现在给组件增加一个<slot></slot>插槽：

Vue.component('child-component',{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })

此时，在组件<child-component>你好</child-component>中写的“你好”起了作用

总结：没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容 就会跑到它这里了！

2. 默认插槽

具名插槽，就是给这个插槽起个名字

在组件中，我给插槽起个名字，一个名字叫"girl"，一个名字叫"boy"，还有一个不起名字。

然后在<child-component></child-component>内，slot属性对应的内容都会和组件中name一一对应。

而没有名字的，就是默认插槽。

<div id="app">
    <child-component>
        <template slot="girl">
            漂亮、美丽、购物、逛街
        </template>
        <template slot="boy">
            帅气、才实
        </template>
        <div>
            我是一类人，
            我是默认的插槽
        </div>
    </child-component>
</div>

<script>
    Vue.component('child-component',{
        template:`
            <div>
            <h4>这个世界不仅有男人和女人</h4>

            <slot name="girl"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot name="boy"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot></slot>
            </div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

3. 具名插槽

为<template></template>标签添加slot属性并设置属性值的插槽即为具名插槽。

4. 作用域插槽

说明：组件上的属性可以在组件元素内使用。

在<slot></slot>元素上定义一个属性say，接下来在使用组件child，然后在template元素上添加属性slot-scope。

打印结果后发现是{“say”： “你好”}，也就是slot上面的属性和值组成的键值对，这就是作用域插槽。

能够把组件上的属性/值，在组件元素上使用！

<div id="app">
    <child>
        <template slot-scope="a">
            {{a}}
        </template>
    </child>
</div>

<script>
    Vue.component('child',{
        template:`
            <div>
                <slot say="你好"></slot>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

再看下面的例子：

<div id="app">
    <child :lists="nameList">
        <template slot-scope="a">
            {{a}}
        </template>
    </child>
</div>

<script>
    Vue.component('child',{
        props:['lists'],
        template:`
            <div>
                <ul>
                    <li v-for="list in lists">
                        <slot :bbbbb="list"></slot>
                    </li>
                </ul>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{
            nameList:[
            {id:1,name:'孙悟空'},
            {id:2,name:'猪八戒'},
            {id:3,name:'沙和尚'},
            {id:4,name:'唐僧'},
            {id:5,name:'小白龙'},
            ]
        }
    })
</script>

输出结果为：
{ “bbbbb”: { “id”: 1, “name”: “孙悟空” } }
{ “bbbbb”: { “id”: 2, “name”: “猪八戒” } }
{ “bbbbb”: { “id”: 3, “name”: “沙和尚” } }
{ “bbbbb”: { “id”: 4, “name”: “唐僧” } }
{ “bbbbb”: { “id”: 5, “name”: “小白龙” } }