vue2.0 组件之间的数据共享

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

vue2.0 组件之间的数据共享

---

---

10. 组件之间的数据共享

10.1 组件之间的关系

• 在项目开发中，组件之间的最常见的关系分为如下两种：
  1. 父子关系
  2. 兄弟关系

10.2 父子组件之间的数据共享

• 父子组件之间的数据共享又分为：
  1. 父 -> 子共享数据
  2. 子 -> 父共享数据

1. 父组件向子组件共享数据

• 父组件向子组件共享数据需要使用自定义属性。示例代码如下：

2. 子组件向父组件共享数据

• 子组件向父组件共享数据使用自定义事件。示例代码如下：

10.3 兄弟组件之间的数据共享

• 在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。
• EventBus 的使用步骤
  1. 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象
  2. 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
  3. 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件