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

【问题标题】：Vuejs - Passing parent component props to child element with the templateVuejs - 使用模板将父组件道具传递给子元素
【发布时间】：2018-12-12 16:07:01
【问题描述】：

我要解决的问题是我希望子组件在 v-expansion 面板展开/收缩时做出反应。

通常这将是微不足道的，但是，我试图通过作用域插槽将值从 vuetify 组件中的 prop 传递到组件。因为我是在循环中渲染子组件，所以不能只使用 Data 来绑定 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>

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

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

任何想法都将不胜感激。

【问题讨论】：

当你说你想让子组件“react”你到底是什么意思？
子组件包含依赖于传递给它的值的逻辑。如果值为 true，则显示一些内容，否则隐藏内容。因此，绑定需要保持反应性。我希望这能回答你的问题。
你能在槽上放一个 v-if 吗？
这可行。考虑到在渲染时有几个 v-expansion-panel-content 组件，我如何将个人 v-expansion-panel-content 值道具绑定到 v-if？
等等，我想我找到了，你试过了吗：:signal='variableToPassAsProps'

标签： javascript vuejs2 vuetify.js

【解决方案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>

【讨论】：