trudbot's blog
·
vue组件和插槽之间的通信
💡
原文中文，约6000字，阅读约需15分钟。
📝
内容提要
介绍Vue中父子组件通信的方法，使用provide/inject API传递公共对象实现数据绑定。在element-plus中，使用getOrderedChildren hook访问插槽内指定组件提供的数据，已应用于carousel、tabs等组件。
🎯
关键要点
- Vue中父子组件通信的挑战，尤其是插槽与父组件之间的通信。
- 使用provide/inject API传递公共对象来实现数据绑定。
- 在select组件中，使用provide提供selectedData的引用。
- 子组件通过inject接收父组件提供的数据，并实现数据绑定。
- element-plus中使用getOrderedChildren hook来获取插槽子组件的顺序。
- 在select中定义ref数组并通过provide提供给子组件。
- option组件在mounted时将自己的数据添加到父组件的orderedChildren中。
- 支持动态插槽内容的添加和删除功能，使用唯一标识uid管理数据。
- 通过getCurrentInstance()方法访问组件实例，遍历虚拟DOM树。
- element-plus通过扁平化虚拟DOM树实现查找和管理插槽内组件。
- 提供通用hooks以帮助组件访问插槽内指定组件的数据，确保数据顺序稳定。
- 此hook在element-plus的carousel、tabs等组件中得到应用。
➡️
