本文通过一个手风琴效果的小实例，详细介绍了如何在Vue中利用父子组件的事件传递实现这一功能。核心在于理解Vue实例的唯一标识_uid的使用以及通过$parent和$children进行通信。通过创建名为Collapse的父组件和CollapseItem的子组件，实现了点击标题展开/关闭内容的交互。在子组件中，点击事件触发父组件的cut方法，并传递当前实例的_uid，从而更新其他子组件的状态。
目标: 通过手风琴的小实例，了解vue的父子组件的事件传递方式(其中一种)。vue实例唯一标识_uid的实际使用。
建议阅读时间: 3分钟
手风琴，涉及到两个组件，
和
, 要实现的功能无非两点：
小知识: 每个Vue实例都会有一个递增的id，可以通过this._uid获取
代码实现:
1. 定义一个父组件Collpase，实现以下功能
挂载cut方法，传入被点击的实例的Id, 遍历子组件，确认是谁被点击了
没有被点击的子组件，其show属性置位false
// 引入vue
// 定义个父组件collapse
Vue.component('Collapse', {
methods: {
cut(childId) {
this.$children.forEach(child => {
console.log('ci', child._uid)
if(child._uid !== childId) {
child.show = false;
}
});
}
},
template: `
})
复制代码
2. 定义一个子组件CollpaseItem，实现以下功能
接受一个tile，作为标题
data中维护一个show属性，控制content的显示隐藏
当title被点
最低0.47元/天 解锁文章
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
