Vue.jsでコンポーネントの要素をpropsによって切り替える

Vue.png

Vue.jsでボタンコンポーネントなどを作成する場合、ユースケースに応じてHTMLの実体をa要素とbutton要素と切り替えたいケースというのが発生します。

そういったケースはVue.jsの動的コンポーネントを利用することで対応ができます。

以下はasHtml Propsでa要素とbutton要素を切り替えているサンプルです。

<template>
  <component :is="asHtml" :href="href">
    <slot />
  </component>
</template>
  
<script setup lang="ts">
withDefaults(
  defineProps<{
    asHtml?: 'a' | 'button';
    href?: sting;
  }>(),
  {
    asHtml: 'a',
    href: undefined,
  },
);
</script>

デフォルトはbutton要素が利用できるようにしているのでa要素を利用したい場合のみas-html porpsを指定して利用します。

<template>
  <div>
    <!-- button要素として利用 -->
    <Button>button</Button>
    <!-- a要素として利用 -->
    <Button as-html="a" href="https://www.to-r.net">a</Buttons>
  </div>
</template>

スポンサードリンク

«Nuxt3でESLintの設定をする | メイン | Tailwind CSSでdisabled»