Vue中slot插槽的应用（学习笔记）

参考资料：

https://blog.csdn.net/weixin_43915587/article/details/90905961

slot插槽：简单讲就是想在父组件使用子组件时，给子组件传递一些特定的结构内容，先在子组件内设定一块儿占位区域，最后将传进去的结构内容放置在占位区即可

注：它的内容可以包含任何模板代码，包括HTML，如果传递的内容，没有slot 来接收，那么，传递的内容就会被抛弃掉，不会起作用。

1、匿名插槽

就是不给插槽命名，直接把全部东西都传递给子组件

父组件：

//引用child组件
<template>
    <div>
        <h1>父组件的页面</h1>
        <Child>
            {{msg}}
        </Child>
    </div>
</template>

<script>
    import Child from '../components/child'
    
    export default{
        data () {
            return {
　　　　　　　　　msg:'这是动态传入的slot的内容'
　　　　　　　}            
        },
        components:{ Child }
    }
</script>

<style>
</style>

子组件：放置slot占位

<template>
    <div>
　　　　　//slot里面也可以设置内容，这个可以设置不传内容时，slot有个默认值替换
        <slot>这里面是slot的默认值</slot>
        <h3>子组件页面</h3>
    </div>
</template>

<script>
    export default {
        name: "child",
        props:[],
        data:function(){
            return {}
        }
    }
</script>

<style>
</style>

vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，被废弃的这两个，不会被支持即无效。

2、具名插槽--就是指给子组件插槽定义名称，与父组件传递的内部结构名称一一对应，具名插槽只需要 name值 与 slot的值 对应 ，和插槽的顺序没有关系。

父组件：

//引入组件的页面
<Child>
     <!--2.6.0以前的写法-->
     <template slot='header'>
        <p>------------header----------------</p>
        <h3>这是header1的内容</h3>
        <p>这是header2的内容</p>
    </template>
    <!--2.6.0以后的写法-->
    <template v-slot:footer>
        <p>------------footer----------------</p>
        <h3>这是footer1的内容</h3>
        <p>这是footer2的内容</p>
    </template>
        
    <p>-----------default-----------------</p>
    <p>这是default剩下的内容1</p>
    <p>这是default剩下的内容2</p>
</Child>

子组件：

<slot>---默认内容---</slot>
<h3>slot组件页面</h3>
<slot name='header'>---header的默认内容---</slot>
<slot name='footer'>---footer的默认内容---</slot>

3、作用域插槽--作用域插槽主要是 使用子组件的任何数据 来达到自定义显示内容的目的

父组件：

<template>
    <div>
        <!--这里message是向子组件传入数据-->
        <Child :message='msg'>
　　　　　　　 <！--2.6.0以前使用slot-scope来获取组件传递过来的值-->　　　
　　         <!--这里的thing是自定义名称，是获取对应name下数据的对象-->
            <div slot='sayWhat' slot-scope='thing'>说了：{{thing.said}}</div>
            <!--这里的val也是自定义名称，是获取对应name下数据的对象-->
            <template slot='listbox' slot-scope='val'>
                <p>{{val.send.text}}</p>
            </template>

            <！--2.6.0以后使用v-slot:name='value'来获取组件传递过来的值-->
　　　　　　　<div v-slot:sayWhat='thing'>说了：{{thing.said}}</div>
       </Child>
    </div>
</template>

<script>
    import Child from '../components/child'
    
    export default{
        data () {
            return {
               msg: '这是动态传入的slot的内容',
           }
        },
        components:{slotScope }
    }
</script>

<style>
</style>

子组件：传递回去时一定要绑定数据（:send=''value''）,如果不绑定，传回去的是个空对象

<template>
    <div>
        <!--这里send也是自定义名称，表示要传给父组件对应name的对象值-->
        <slot name='listbox' v-for='value in list' :send='value'></slot>
        <!--这里said也是自定义名称，表示要传给父组件对应name的对象值，这里表示可将父组件传递过来的message再传递回去-->
        <slot name='sayWhat' :said='message'></slot>
    </div>
</template>

<script>
    export default {
        props:['message'],
        data:function(){
            return {
              list:[{
              "id":10,
              "text":"小明"
          },{
              "id":20,
              "text":"小红"
          },{
              "id":30,
              "text":"小张"
          },{
              "id":40,
              "text":"小王"
          }]
          }
        }
    }
</script>

<style>
</style>