一篇文章搞定组件通信

常用的组件通信方式：6种

• props
  • 适用于的场景：父子组件通信
  • 注意事项：
    • 如果父组件给子组件传递数据（函数）：本质就是子组件给父组件传递数据
    • 如果父组件给子组件传递数据（数据）：本质就是父组件给子组件传递数据
  • 书写方式：3种小提示：路由的props
    • 例如：['todo']，{type:Array}，{type:Array,default:[ ]}
  • 书写方式：布尔值，对象，函数形式
• 自定义事件　　
  • 适用于的场景：子给父传递数据
  • 使用方式：$on与$emit
• 全局事件总线
  • 适用于场景：万能
  • 使用方式：Vue.prototype.$bus = this
• 消息订阅与发布（pubsub）
  • 适用于场景：万能
  • React框架中使用比较多　
• Vuex
  • 适用于场景：万能
• 插槽
  • 适用于场景：父子组件通信 ----（传递的一般是结构）
  • 分类：默认插槽、具名插槽、作用域插槽
• v-model
  • 实现原理：value与input事件实现的，而且还需要注意可以通过v-model实现父子组件数据同步
• sync属性修饰符
  • 实现原理：
    • :money.sync，代表父组件给子组件传递props[money]
    • 给当前子组件绑定一个自定义事件（update:money）
• $attrs与$listeners
  • 使用方式：v-bind="$attrs"  v-on="$listeners"
  • 他们两个都是组件实例的属性，可以获取到父组件给子组件传递的props与自定义事件
• $children与$parent
  • 通过ref可以获取到某一个组件
  • $children组件实例的属性，可以获取到当前组建的全部子组件，为一个【数组】，通过forEach遍历。
  • $parent组件实例属性，可以获取到当前子组件的父组件，进而可以操作父组件的数据与方法