TOP
>
JavaScript
>
Vue.jsでコンポーネントの要素をpropsによって切り替える
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>