Storybookで作ったボタンコンポーネントをページで使う時にボタンのテキストを変更したい

Question

Nuxt.jsでwebアプリを作っています。
Storybookで作ったボタンコンポーネントをページで使う時にボタンのテキストを変更したいのですが
どのようにすれば良いのか分かりません。

今「ButtonDefault.vue」というコンポーネントを作っていまして

<template>
  <div>
    <button>
      {{ text }}
    </button>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Button Default'
    }
  }
}
</script>
<style scoped>
button {
  font-size: 12px;
  border-color: #000;
  color: #000;
  padding: 8px 20px;
  border-radius: 5px;
  text-decoration: none;
}
</style>

と設定しているのですが、実際に使う時に<button-default />で使えるのですが、
ボタンのテキストがデフォルトの「Button Default」になっているのを、別のテキストに変えたいのですが
方法が分かりません。

ネットで調べたのですが、解決策がわからなかったので
ご教示いただければと思います。

Answer 1

ButtonDefault.vue を使う時に親から propsの形で値を渡してあげる必要があります。

単純に

<button-default text="この文字で出したい" />

というふうに渡してあげれば、ButtonDefault.vue 内の {{ text }} の部分が指定した文字列になります。
何も渡さない場合、defaultの Button Default という文字列が入ります。

Comments

[heureux]

ありがとうございます！やって見ます！ご回答いただき、どうもありがとうございました！