项目学习vue3.0(五)|青训营笔记

116 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 十一 天
将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。 通过 v-model 控制展开的面板列表,activeNames 为数组格式。 el-collapse即为折叠面板的意思,一般主要是用于:对复杂区域进行分组和隐藏,保持页面的整洁,有分类整理的意思。

collapse有折叠的意思,不过fold也有折叠的意思。所以笔者这里封装的组件就改名字了,不叫my-collapse,叫做my-fold。 父组件传递数据,子组件props接收。更改父组件数据,子组件也就自动更改更新了使用this.refs.child.xxx=yyy,给子组件打一个ref,直接更改对应值即可使用this.refs.child.xxx = yyy,给子组件打一个ref,直接更改对应值即可使用this.children可以访问所有的子组件实例对象。所以,也可以直接更改 编写panel代码 ` 编写collapse代码 `