Vue3.x Slot插槽使用

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

文章目录 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>