Vue.js 3 SFC Prop

Question

When I use a prop in SFC the prop shows empty, or as you prefer it does not show.

I have an ActionButton.vue file:

<script setup>
defineProps({
    actionButtonOne: {
        type: String
    }
})
</script>

<template>
    <button type="button">{{ actionButtonOne }}</button>
</template>  

And I am importing it to CardElement.vue:

<script setup>
import ActionButton from './ActionButton.vue'

defineProps({
  singleItem: {
    type: String
  }
})
</script>

<template>
          <ul>
            <li>{{ singleItem }} <ActionButton>Remove</ActionButton></li>
          </ul>
</template>

But when I look in the browser, my Buttons are empty, just a rectangle without "Remove" description. Why is this and what can I do to fix it?

Answer 1

You can directly use slot to pass content or pass a value for the defined prop :

<script setup>
import ActionButton from './ActionButton.vue'

defineProps({
  singleItem: {
    type: String
  }
})
</script>

<template>
          <ul>
            <li>{{ singleItem }} <ActionButton action-button-one="Remove" ></ActionButton></li>
          </ul>
</template>