Vuejs-使用模板将父组件属性传递给子元素

Question

The problem I'm trying to solve is I want the child component to react when a v-expansion panel is expanded/contracted.

Normally this would be trivial, however, I'm attempting to pass a value from a prop within a vuetify component to component via a scoped slot. Because I'm rendering the child components within a loop, I can't just use Data to bind the prop.

  <v-expansion-panel expand>    
   <v-expansion-panel-content 
     v-for="item in this.items"
     :key="item.key">
     <div slot="header">
       content
     </div>          
   <slot :items="item.children"></slot>
  </v-expansion-panel-content>
 </v-expansion-panel>  

The v-expansion-panel-content has a prop called value. I need to bind that prop to the slot. Ideally, I'd like to achieve something like this:

<slot :items="item.children" :panelValue="value"></slot>

Any ideas would be greatly appreciated.

Answer 1

I've solved this, but in a less than ideal way.

<v-expansion-panel expand>    
  <v-expansion-panel-content
    v-for="item in this.items"
    :key="item.key"
    v-model="item.isOpen">
    <div slot="header">
      content
    </div>       
  <slot :items="item.children" :isVisible="item.isOpen"></slot>
</v-expansion-panel-content>