如何在 vue js 中将组件作为 props 传递以及如何正确使用它？

Question

您好，我有一个 Child 组件，其主要功能是过滤和呈现项目列表。此子组件将在多个父组件（视图）中使用，并且根据父组件，子组件需要呈现不同的子组件（大子组件）。

父组件

    <template>
     <main>
    //Child Component
    <list-component
      name="my items"
      //List of Items I need to render
      :list="items.list"
    >
      //Slot Passing my grandchild component
      <template slot="child-component">
        <component :is="child_component" :items="item"></component>
      </template>
    </list-component>
  </main>
</template> 

    <script>
    import ListComponent from '.ListComponent';
    import ItemComponent from '.ItemComponent.vue';

export default {
  components: {
    ListComponent,
    ItemComponent
  },

  data() {
    return {
      child_component: 'ItemComponent'
    };
  },
}
</script>

ListComponent.vue（子组件）

<template>
  <main>
    <v-row class="ma-0">
      <v-col v-for="(item, index) in list" :key="index" class="pa-0">
        // I would like render my grandchild component here. 
        <slot name="child-component"></slot>
      </v-col>
    </v-row>
  </main>
</template>

<script>

export default {
  props: {
    name: {
      type: String,
      required: true
    },

    list: {
      type: Array,
      required: true
    }
  }
};
</script>

ItemComponent.vue（孙子）

<template>
  <div>
    <v-img
      src="item.image"
    ></v-img>

    <v-row>
      <span>{{
        item.name
      }}</span>
    </v-row>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

所以基本上我需要能够将 ItemComponent.vue(grandchild) 从 View(grandfather) 传递到 View 的 ListComponent.vue(child) 以便子组件可以循环遍历从父级传递的项目并使用孙子组件呈现信息。

另外我在哪里声明孙子的道具？

Answer 1

毕竟我能够找到解决方案，我会将它留给需要它的人。

基本上在子组件中，我们需要通过像这样绑定项目来通过插槽来访问父组件的属性：

<slot name="child-component" :item="item"></slot>

在父级上，我们可以通过绑定插槽并为对象命名来访问它，在这种情况下，我选择了 child 并注意到在组件上我们可以通过声明 child.item 来访问 item

  <template v-slot:child-component="child">
    <component :is="child_component" :itinerary="child.item"></component>
  </template>