vue组件之间的通信

一、父子组件，父组件=》子组件

父组件中的子组件：

<users :users111="users"></users>

子组件：props

props:{
    users111:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }

二、父子组件，子组件=》父组件

子组件： this.$emit()

<h1 @click="changeTitle">{{title}}</h1>

methods:{
    changeTitle() {
      this.$emit("transferVal","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }

父组件：@方法接

<users @transferVal="updateVal"></users>

methods:{
    updateVal(e){
      this.title = e;
    }
  },

this.$emit()扩展(.sync修饰符)：

常规写法：
//父组件给子组件传入一个函数
<MyFooter :age="age" @setAge="(res)=> age = res"></MyFooter>
//子组件通过调用这个函数来实现修改父组件的状态。
mounted () {
    console.log(this.$emit('setAge',1234567));、
}

sync修饰符写法：
//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age"></MyFooter>
//子组件触发事件
mounted () {
   console.log(this.$emit('update:age',1234567));
}

三、中央事件总线(事件中心) eventBus

//import Event from '../../utils/bus.js'

var Event = new Vue();
Event.$emit(事件名, 数据);
Event.$on(事件名, data => {});

Event.$emit('data-a', this.name);
Event.$on('data-a', name => {
   this.name = name;
})

四、vuex状态管理器

五、ref / refs

ref="aa"加载普通dom上面，this.$refs.aa获取dom实例。
ref="aa"加在子组件定义上，this.$refs.aa获取子组件的实例对象。

六、parent

this.$children
this.$parent

七、provide / inject API

八、attrs/$listeners

九、localStorage / sessionStorage