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" />