props&$emit

父子通信

//父
<template>
  <div id="app">
    <users @userChange="userChangeHander" v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  methods:{
    userChangeHander(e){
        console.log(e)
    }
}
  components:{
    "users":Users
  }
}
//子
<template>
  <div id="app">
    <div v-for="item in users">{{item}}</div>
  </div>
</template>
<script>
export default {
   props:['users']
  name: 'App',
  data(){
    return{
    }
  },
  methods:{
    childChange(){
        this.$emit('userChange','lili')
    }
}
  components:{
    "users":Users
  }
}

$attrs&$listeners

多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此 Vue2.4 版本提供了另一种方法

attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。 listeners" 传入内部组件

provide&inject

Vue2.2.0 新增 API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

this.children

this.root 获取根实例
this.$children获取子组件实例

vuex

Bus总线

localStorage&sessionStorage