javascript - Vuejs - 使用模板将父组件道具传递给子元素
问题描述
我要解决的问题是我希望子组件在 v-expansion 面板展开/收缩时做出反应。
通常这将是微不足道的,但是,我试图通过作用域插槽将值从 vuetify 组件中的 prop 传递到组件。因为我在循环中渲染子组件,所以不能只使用 Data 来绑定道具。
<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>
任何想法将不胜感激。
解决方案
我已经解决了这个问题,但方式不太理想。
<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>
推荐阅读
- ios - 启用模块后如何编译我的目标 C++ 项目?
- elasticsearch - elasticsearch查询之间的区别
- hadoop - Hadoop:资源管理器不在本地主机上运行
- javascript - 打开抽屉时,所有按钮在抽屉列表中出现鬼点击
- hp-alm - 自动创建 HP ALM 对象
- c# - 错误:尝试为 ListView 进行内部联接时,“必须在方法跳过之前调用方法 orderby”
- javascript - 何时调用 lit-element 属性“hasChanged”?
- sql - Oracle SQL 等效于 Excel 的索引匹配
- javascript - React Native 无法读取未定义的“状态”属性
- reactjs - 尝试为一组标签添加选中/未选中状态