Vue 3 Access data defined in a child component in a template-CodePudding

I have following three Vue components using the Composite API with the setup option. Where I want to access data in a nested tree.

The following code is a simplification of the code I need to integrate it. Basically the app is following the Atom Design principals (see also https://atomicdesign.bradfrost.com/chapter-2/).

// Wrapper.vue
// High level component composing smaller ones -> Organism
<template>
  <div>Wrapper Text</div>
  <Comp1 :isEdit="isEdit" :dataArr="data">
    <div >{{item.name}} – {{item.description}}</div>
  </Comp1>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {Comp1} from './components';

const isEdit = ref(true);

const data = [
  {name: 'Item 1', value: 'item-1', description: 'Item 1 description'},
  {name: 'Item 2', value: 'item-2', description: 'Item 2 description'},
  …
]
</script>

// Comp1.vue
// Composition consisting of one or more small components -> Molecule
<template>
  <div>Foo Bar</div>
  <div v-if="!isEdit">{{text}}</div>
  <Comp2 v-if="isEdit" :dataArr="data">
    <slot></slot>
  </Comp2>
</template>
<script lang="ts" setup>
import {default as Comp2} from './Comp2.vue'

withDefaults(defineProps<{isEdit: boolean, dataArr: anx[]}>)(), {isEdit: false, dataArr: () => []})


const text = "Hello World"
</script>

// Comp2.vue
// Simple component rendering data -> Atom
// You could argue here if it is an atom or not, but this is not the point here ;)
<template>
  <div>Comp 2 Text</div>
  <div v-for="item in dataArr">
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>

withDefaults(defineProps<{dataArr: any[]}>)(), {dataArr: () => []})

</script>

I want to define a template in the wrapper component where I define how to render data which are available in Comp2 but haven't found a way yet how to do so. I had a look into provide / inject but haven't seen how this could help.

Is there a way how I can access the item in the template which is defined in the wrapper component? If the solution is with provide / inject, please point me in the right direction. :)

CodePudding user response：

You can use scoped slot to do something like this here, a demo I made Link