vue插槽的使用

对于父组件

<my-slot>
    <template #soltProp="fartherData">
        <span>{{fartherData.slotData.a1}}</span>
    </template>
</my-slot>

import MySlot from "@/components/MySlot.vue";

components: {
  MySlot,
},

v-slot可替换为#; v-slot绑定的name值与子组件slot中的name值对应;

对于子组件

  <div id="mysolt_box">  
    <slot name="soltProp" :slotData="slotData"></slot>
  </div>

  data() {
    return {
        slotData:{
            a1: "父组件调用插槽数据"
        },
    };
  },

在slot标签上绑定父组件中需要用到的数据