Next

propsを使って受け取った真偽値を元に、v-ifを使って出し分けをする方法についてです。

コンポーネント側

<script setup lang="ts">
interface Props {
  className: string;
  arrowColor: boolean;
}

const Props = withDefaults(defineProps<Props>(), {
  className: "",
  arrowColor: true,
});

let colorFlag = ref<boolean>(Props.arrowColor);
</script>

<template>
    <span :class="className">
      <img src="@/assets/images/btn-arrow.svg" alt="" v-if="colorFlag" />
      <img src="@/assets/images/btn-arrow-black.svg" alt="" v-else />
    </span>
</template>

呼び出す側

<CommonLinkButton className="_button-blue" :arrowColor="true" />