slot 三种插槽的使用总结

当子组件有一部分内容是根据父组件传递过来的dom进行显示时，可用slot。
希望在组件中添加一点东西，这个时候需要用到插槽来发内容
插槽的作用：让用户可以扩张组件，去更好的复用组件，对其定制化处理

一、匿名插槽

父组件

  <div class="hello">
    父组件展示
    <child>
      <p>想在子组件上展示一点东西</p>
    </child>
  </div>

子组件

 <template>
  <div>
    子组件展示
    <slot></slot> //关键点
  </div>
</template>

<script>
export default {
  name: "child"
};
</script>

二、具名插槽

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中

父组件

父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

 <template>
<div>
    <div>slot内容分发</div>
    <child1>
        <template slot="header">
            <p>我是页头的具体内容</p>
        </template>
        <template slot="footer">
            <p>我是页尾的具体内容</p>
        </template>
    </child1>
</div>
</template>
<script>
    import child1 from "./child1.vue";
 
    export default {
        name: "father1",
        components: {
            child1
        }
    }
</script>
<style scoped>
</style>

子组件

子组件的代码，设置了两个插槽(header和footer)：

<template>
    <div>
        <div class="header">
            <h1>我是页头标题</h1>
            <div>
                <slot name="header"></slot>
            </div>
        </div>
        <div class="footer">
            <h1>我是页尾标题</h1>
            <div>
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template> 
<script>
    export default {
        name: "child1"
    }
</script>
<style scoped>
</style>

三、作用域插槽

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽
作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数
在下面这个例子中，子组件是个信息列表模块，item在不同的父组件中获取的state不同，可以使用作用域组件实现

父组件

<div>
    <template v-slot:source="data" >
        <span>插槽的内容{{data.msg}}</span>
    </template>
</div>

子组件

 <template>
 <div >       
      <slot name="source" :msg="msg">
           <span>子组件数据{{msg}}</span>
       </slot>
</div>
<script>
    export default {
        data(){
	        return{
	           msg:'传递是数据'
	           }
	        }
    }
</script>

效果图
子组件的数据：传递的数据
插槽的内容：传递的数据

链接: https://blog.csdn.net/bobozai86/article/details/105473445/.
链接: https://blog.csdn.net/kerelee_li/article/details/81662217.
链接: https://www.xin3721.com/Articlejquery/javascript17226.html.