コンポーネントパラメータの受け渡しとvueのスロットの関係

Vue では、パラメータの受け渡しとスロットは 2 つの異なる概念ですが、それらの間には一定の関係があります。

パラメーターの受け渡しとは、コンポーネント間でデータを受け渡すことを指します。これは、props と $emit、provide と inject、Vuex などを通じて実現できます。パラメータを渡す目的は、コンポーネントがデータを共有できるようにして、コンポーネント間の通信を実現することです。

スロットはコンポーネント内に 1 つ以上のスロットを定義するもので、コンポーネントの使用時に任意のコンテンツをスロットに挿入できます。スロットの目的は、コンポーネントをより柔軟にすることであり、使用シナリオに応じてさまざまなコンテンツを動的に挿入できます。

パラメータの受け渡しとスロットの関係は、パラメータの受け渡しを使用してスロットの内容を制御できるということです。たとえば、props 属性を通じて子コンポーネントにデータを渡し、子コンポーネントのスロットを使用してこれらのデータを表示できます。別の例として、$emit イベントを通じて子コンポーネントのデータを親コンポーネントに渡し、親コンポーネントのスロットを使用してデータを表示できます。

以下は、パラメーターとスロットを渡すことによってコンポーネント内のコンテンツを制御する方法を示す例です。




// 父组件
<template>
  <div>
    <child-component :message="hello">
      <template #default="{ message }">
        <div>{
   
   { message }} World!</div>
      </template>
    </child-component>
  </div>
</template>

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

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

// 子组件
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  data() {
    return {
      message: this.message
    }
  }
}
</script>

上記の例では、親コンポーネントは props 属性を通じて子コンポーネントにデータを渡し、子コンポーネントはスロットを通じて親コンポーネントにデータを渡します。具体的には、親コンポーネントはデータ hello を子コンポーネントに渡し、子コンポーネントはデータメッセージをスロットに渡し、親コンポーネントはスロットを通じてデータを受信してページに表示します。

つまり、パラメーターの受け渡しとスロットは 2 つの異なる概念ですが、それらの間には一定の関係があります。パラメータの受け渡しを使用してスロット内のコンテンツを制御し、コンポーネント間の通信と動的なレンダリングを実現できます。

コンポーネントパラメータの受け渡しとvueのスロットの関係

おすすめ