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

Question

我要解决的问题是我希望子组件在 v 扩展面板为 expanded/contracted 时做出反应。

通常这是微不足道的，但是，我试图通过范围插槽将 vuetify 组件中的道具的值传递给组件。因为我在一个循环中渲染子组件，所以我不能只使用数据来绑定道具。

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

v-expansion-panel-content 有一个名为 value 的属性。我需要将该道具绑定到插槽。理想情况下，我想实现这样的目标：

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

如有任何想法，我们将不胜感激。

Answer 1

我已经解决了这个问题，但不是很理想。

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

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

Vuejs - Passing parent component props to child element with the template

javascript

vuejs2

vuetify.js