Vue3.x Slot插槽使用

Vue版本3.x插槽使用记录

匿名插槽命名

<template>
  <div class="titleModel">
    <div class="titleArea">
      <span class="titlelabel"></span>
      <span class="title_Main">{{ props.titleName }}</span>
    </div>
    <!-- 匿名插槽 -->
    <slot></slot>
  </div>
</template>

匿名插槽使用

  <div class="g2Plot">
    <TitleModel :title-name="'G2Plot'"> 匿名插槽 </TitleModel>
    <div id="contain" ref="contain"></div>
  </div>
</template>

<script lang="ts" setup>
import { Line } from "@antv/g2plot";
import { ref, onMounted, nextTick } from "vue";
import TitleModel from "../../../components/TitleModel/index.vue";

具名插槽命名

相比匿名插槽多一个name参数，使用也一样，通过template模板名称来进行相应的插槽赋值。

<template>
  <div class="titleModel">
    <div class="titleArea">
      <span class="titlelabel"></span>
      <span class="title_Main">{{ props.titleName }}</span>
    </div>
    <!-- 具名插槽 -->
    <slot name="right"></slot>
  </div>
</template>

具名插槽使用

<template>
  <div class="g2Plot">
    <TitleModel :title-name="'G2Plot'">
      <template #right>具名插槽</template>
    </TitleModel>
    <div id="contain" ref="contain"></div>
  </div>
</template>

<script lang="ts" setup>
import { Line } from "@antv/g2plot";
import { ref, onMounted, nextTick } from "vue";
import TitleModel from "../../../components/TitleModel/index.vue";

作用域插槽命名

<template>
  <div class="titleModel">
    <div class="titleArea">
      <span class="titlelabel"></span>
      <span class="title_Main">{{ props.titleName }}</span>
    </div>
    <!--作用域插槽-->
    <slot name="right" :data-right="testData"></slot>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";
const props = defineProps({
  titleName: {
    type: String,
    default: "无标题",
  },
});
const testData = ref(["作用域插槽"]);
</script>

作用域插槽使用

作用域插槽无非比具名插槽多一个传值状态，能让父组件拿到子组件的数据，并数据在父组件模块进行灵活渲染。

<template>
  <div class="g2Plot">
    <TitleModel :title-name="'G2Plot'">
      <template #right="dataTest">{{ dataTest }}</template>
    </TitleModel>
    <div id="contain" ref="contain"></div>
  </div>
</template>