javascript - how to pass components as props in vue js and how to use it properly? - Stack Overflow

admin管理员组

文章数量:1278950

Hello I have a Child ponent that the main function is to filter and render a list of items. This child ponent is to be used in multiple parent ponents(views) and depending on the parent ponent the child ponent need to render a different child ponent (grand child).

Parent Component

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

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

export default {
  ponents: {
    ListComponent,
    ItemComponent
  },

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

ListComponent.vue (child ponent)

<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 ponent here. 
        <slot name="child-ponent"></slot>
      </v-col>
    </v-row>
  </main>
</template>

<script>

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

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

ItemComponent.vue (grand child)

<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>

So basically I need to be able to pass ItemComponent.vue(grandchild) from the View(grandfather) to the View's ListComponent.vue(child) so that the child ponent can loop trough the items passed from the parent and use the grand child to render the information.

Also where do I declare the props for the grandchild?

Hello I have a Child ponent that the main function is to filter and render a list of items. This child ponent is to be used in multiple parent ponents(views) and depending on the parent ponent the child ponent need to render a different child ponent (grand child).

Parent Component

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

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

export default {
  ponents: {
    ListComponent,
    ItemComponent
  },

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

ListComponent.vue (child ponent)

<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 ponent here. 
        <slot name="child-ponent"></slot>
      </v-col>
    </v-row>
  </main>
</template>

<script>

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

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

ItemComponent.vue (grand child)

<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>

So basically I need to be able to pass ItemComponent.vue(grandchild) from the View(grandfather) to the View's ListComponent.vue(child) so that the child ponent can loop trough the items passed from the parent and use the grand child to render the information.

Also where do I declare the props for the grandchild?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Apr 10, 2020 at 2:22 Angel D.Angel D. 22533 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

I was able to find a solution after all I will leave this for those who need it.

basically in the child ponent we need to give access to the attribute to the parent trough the slot by binding the item like:

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

and on the parent we can access it by binding the slot and giving a name to the object in this case I chose child and notice that on the ponent we can access item by declaring child.item

  <template v-slot:child-ponent="child">
    <ponent :is="child_ponent" :itinerary="child.item"></ponent>
  </template>

本文标签： javascripthow to pass components as props in vue js and how to use it properlyStack Overflow