【前端学习 -Vue (7) Vue2.x组件通信有哪些方式？】

1.Vue2.x组件通信有哪些方式？

1-1 父子组件通信

• 父->子props；子（emit）->父（on）
• 获取父子组件实例 parent/parent / parent/children 如：直接在子组件的methods方法里面写：this.$parent.show()//show为父组件中定义的方法
• Ref (如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例)，如在引入的子组件的标签上挂载一个： ref="comA"，然后在方法中或者子组件的数据，this.$refs.comA.titles
• Provide、inject 官方不推荐使用，但是写组件库时很常用，祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量

1-2 兄弟组件通信

• Event Bus 实现跨组件通信: Vue.prototype.$bus = new Vue
• Vuex

1-3 跨级组件通信

• Vuex
• attrs,listeners
• Provide、inject

1-4 使用

1. 父子props，on

// 子组件

<template>
  <header>
    <h1 @click="changeTitle">{
  {title}}</h1>//绑定一个点击事件
  </header>
</templ