Excuse me, is it possible to optimize the rendering of component?

[eveningwater]

example

This does not render child elements. I have an application scenario, that is, I may need a button group to render a button list, but this button group container element is not necessary. At this time, I want to use the component element to render it.

<template>
  <component :is="getComponent()">
    <el-button
      v-for="button in buttonList"
      :key="button.text"
      :size="button.size"
      :type="button.type"
      :loading="button.loading"
      @click="button.action"
    >
      {{ button.text }}
    </el-button>
  </component>
</template>
<script lang="tsx" setup>
import { ElButtonGroup } from "element-plus";
import { computed, type Component, type PropType } from "vue";
import type { JSX } from "vue/jsx-runtime";
import type { ButtonItem } from "./interface";
import { defaultButtons } from "./const";
const props = defineProps({
  isGroup: {
    type: Boolean,
    default: true,
  },
  component: {
    type: [String, Object] as PropType<string | JSX.Element | Component>,
    default: "div",
  },
  buttons: {
    type: Array as PropType<ButtonItem[]>,
    default: () => defaultButtons,
  },
});

const buttonList = computed(() =>
  props.buttons?.map((item) => ({
    ...item,
    action: () => {
      emit("click", item.clickType);
    },
  }))
);

//  here, the button group container element is not necessary, i use fragment or template cannot render the child button
const getComponent = () => (props.isGroup ? ElButtonGroup : props.component);
const emit = defineEmits(["click"]);
</script>

Of course, I also know that I can use 2 template elements plus v-if and v-else to handle it, such as:

<template>
   <template v-if="['fragment','template'].includes(getComponent())">
   <component :is="getComponent()">
    <el-button
      v-for="button in buttonList"
      :key="button.text"
      :size="button.size"
      :type="button.type"
      :loading="button.loading"
      @click="button.action"
    >
      {{ button.text }}
    </el-button>
  </component>
   <template>
   <template v-else>
   <el-button
      v-for="button in buttonList"
      :key="button.text"
      :size="button.size"
      :type="button.type"
      :loading="button.loading"
      @click="button.action"
    >
      {{ button.text }}
    </el-button>
   </template>
</template>
<script lang="tsx" setup>
import { ElButtonGroup } from "element-plus";
import { computed, type Component, type PropType } from "vue";
import type { JSX } from "vue/jsx-runtime";
import type { ButtonItem } from "./interface";
import { defaultButtons } from "./const";
const props = defineProps({
  isGroup: {
    type: Boolean,
    default: true,
  },
  component: {
    type: [String, Object] as PropType<string | JSX.Element | Component>,
    default: "div",
  },
  buttons: {
    type: Array as PropType<ButtonItem[]>,
    default: () => defaultButtons,
  },
});

const buttonList = computed(() =>
  props.buttons?.map((item) => ({
    ...item,
    action: () => {
      emit("click", item.clickType);
    },
  }))
);

//  here, the button group container element is not necessary, i use fragment or template cannot render the child button
const getComponent = () => (props.isGroup ? ElButtonGroup : props.component);
const emit = defineEmits(["click"]);

But writing like this will make the template look bloated.

[skirtles-code]

There's an RFC proposing a new directive, v-skip, to handle this kind of scenario: vuejs/rfcs#715.

At the moment, I think the best you can do is to introduce a new component to do the conditional rendering. e.g.:

const Wrapper = ({ tag }, { slots }) => {
  if (tag) {
    return h(tag, null, slots)
  } else {
    return slots.default?.()
  }
}

Wrapper.props = ['tag']

• Playground

[eveningwater]

Thanks for your response, i got it.