構成部品-ベース

コンポーネントの再利用

構成部品を再使用するには、Mybtnという構成部品を作成し、propsでcolorを別の構成部品に置き換えます.

アーキテクチャ

App.vue

<template>
  <MyBtn />
  <MyBtn color="royalblue" />
  <MyBtn />
  <MyBtn />
</template>

<script>
import MyBtn from '~/components/MyBtn'

export default {
  components: {
    MyBtn
  }
}
</script>

MyBtn.vue
受信したTypeはStringなので、App.vueから<MyBtn color="#000" />の部分をメールで受信します.

<template>
  <div 
    :style="{ backgroundColor: color}"
    class="btn">
    Apple
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'gray'
    }
  }
}
</script>



<style scoped>
  .btn {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: gray;
    color: white;
    cursor: pointer;
  }
</style>

Button, slot

私たちが普段使っているButtonのように、中に内容を入れることができます.

App.vue

  <MyBtn>banana</MyBtn>
  <MyBtn :color="color" />
  <MyBtn
    large
    color="royalblue" />
  <MyBtn />
</template>
...

MyBtn.vue<slot></slot>で印刷したい場所にコンテンツを設定できます.コンテンツが置き換えられます!
つまり、textを提供する必要はありません.

<template>
  <div 
    :class="{ large }"
    :style="{ backgroundColor: color}"
    class="btn">
    <slot></slot>
  </div>
</template>
...

! では、slotラベルにはアルファベットしか含まれていませんか?
正解はNo

  <MyBtn :color="color">
    <span style="color: red;">Banana</span>
  </MyBtn>

このようにしてpropsの間に入るすべてのコンテンツは <MyBtn></MyBtn>のコンテンツである.上記の例では、<slot></slotという部分を<span style="color: red;">Banana</span>と呼ぶことができる.
さらに、slotを使用することは、我々が知るslot構造のHTMLと同様に使用することができる.