Vue插槽理解

• 插槽

插槽

slot又名插槽，vue内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口
插槽slot是子组件的一个模板标签元素，而这一个元素是否显示，以及怎么显示是由父组件决定的
slot分为三类：默认插槽、具名插槽、作用域插槽

• 默认插槽

父组件代码详情

"parent">
这里是parent组件
这是parent组件传递给child组件的值
import Child from "../component/Child.vue"

子组件代码详情

"child">
这里是child组件
这是child组件

运行结果：

又叫匿名插槽，当插槽slot没有指定name属性值的时候一个默认显示一个插槽，一个组件内只有一个匿名插槽

• 具名插槽

带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽
父组件代码详情

"parent">
这里是parent组件
"header">给header内容"main">给main内容"footer">给footer内容

子组件代码详情

"child">
这里是parent组件
"header">给header内容"main">给main内容"footer">给footer内容

运行结果：

• 作用域插槽

在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件传递过来的数据如何渲染该插槽
父组件代码详情

  <button @click="show">显示隐藏  "home" v-show="isShow">    <Dialog title="商品选择">                                                        <template #default="{goods}">{{ goods }}                                <!-- <template v-slot:footer>        取消        确认       -->                    <Rbutton style=" display: inline-block;border-radius: 5px;margin-right: 10px;">取消        <Rbutton style="background-color: #1890ff; display: inline-block; border-radius: 5px;">确认            import Dialog from '@/components/Dialog.vue'import Rbutton from '@/components/Rbutton.vue';import FruitList from '@/components/FruitList.vue';export default {  data(){    return{      isShow:false    }  },  name: 'DialogParent',  components: {    Dialog,    Rbutton,    FruitList  },  methods:{    onAddCart(gid,gname){      console.log(gid,gname);    },    show(){      this.isShow=!this.isShow    }  }  }.home{  // position: relative;  background-color: yellow;}

子组件代码详情

<template>    <div class="fruit">        <table class="ftable">            <thead>                <tr>                    <td>ID</td>                    <td>名字</td>                    <td>价格</td>                </tr>            </thead>            <tbody>                <tr v-for="f in fruits" :key="f.id" @click="onAddCart([f.id,f.name])">                    <td>{{ f.id }}</td>                    <td>{{ f.name }}</td>                    <td>{{ f.price }}</td>                </tr>                <slot :goods="f"></slot>            </tbody>        </table>    </div></template><script>export default {    data(){        return{            fruits:[                {                    id:'01',                    name:'苹果~~',                    price:'3.90'                },                {                    id:'01',                    name:'西瓜~~',                    price:'3.70'                },                {                    id:'01',                    name:'葡萄~~',                    price:'3.80'                },                                {                    id:'01',                    name:'橙子~~',                    price:'3.50'                },                                {                    id:'01',                    name:'香蕉~~',                    price:'3.30'                },            ]        }    },    methods:{        onAddCart(params){            this.$emit('add-cart',...params)        }    }}</script><style lang="scss" scoped>.fruit{    // li{    //     list-style: none;    // }    width: 100%;    // height: 100%;    // background-color: plum;    table{        width: 95%;        // border-radius: 20px;        margin: 0 auto;        border: 1px bolid black;        thead{            width: 100%;            // border-radius: 20px;            // background-color: blue;            text-align: center;        }        tbody{            // border-radius: 20px;            width: 100%;            background-color: aliceblue;            text-align: center;        }    }}</style>

**原理：**当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.$slot中，默认插槽为vm.$slot.default,具名插槽为vm.$slot.xxx,xxx是插槽的名字，当组件执行渲染函数时候，遇到slot标签，使用$slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则就是作用域插槽