[vue.js]slotとpropsの違いについて

Index

Props

propsは親コンポーネントから子コンポーネントへデータを渡すために使用されます。これは単方向のデータフローを提供し、子コンポーネントが親から渡されたデータを受け取り、それを使用することができます。

<!-- Parent Component -->
<template>
  <child-component :my-prop="parentData" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: 'Hello from parent'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

<!-- Child Component -->
<template>
  <p>{{ myProp }}</p>
</template>

<script>
export default {
  props: {
    myProp: String
  }
}
</script>

<child-component :my-prop="parentData" />

</template>

import ChildComponent from './ChildComponent.vue';

export default {

data() {

return {

parentData: 'Hello from parent'

}

components: {

ChildComponent

}

</script>

<p>{{ myProp }}</p>

</template>

export default {

props: {

myProp: String

}

</script>

Slot

<slot>はコンポーネントのテンプレートにおけるプレースホルダーまたは穴埋めとして機能し、親コンポーネントが子コンポーネントのテンプレート内で独自のコンテンツを提供することができるようにします。これにより、コンポーネントの外観と構造をより柔軟にカスタマイズできます。

<!-- Parent Component -->
<template>
  <child-component>
    <p>Hello from parent</p>
  </child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

<!-- Child Component -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {}
</script>

<child-component>

<p>Hello from parent</p>

</child-component>

</template>

import ChildComponent from './ChildComponent.vue';

export default {

components: {

ChildComponent

}

</script>

<div>

</div>

</template>

export default {}

</script>

PropsとSlotの違い

データのパッシング: propsはデータを渡すために使用され、<slot>はマークアップやコンテンツを渡すために使用されます。
目的: propsは親から子へのデータの単方向フローを実現し、<slot>はコンポーネントのテンプレートにプレースホルダを提供し、コンテンツのカスタマイズを可能にします。
柔軟性: <slot>はコンポーネントの外観や構造をカスタマイズするための高い柔軟性を提供し、propsはデータの渡し方に関する制約を持っています。