Vue组件间的通信

一、子组件修改父组件数据

子组件想要修改父组件的数据，只能通过子组件事件来触发

通过子组件触发事件更改父组件的style="overflow: xx" 样式 <div id="home" class="home" ref="home" :style="{'overflow': overflow}">

1. 给子组件添加changeOverflow事件

<div @click="changeOverflow">
    <i class="icon-set_01revisepassword icon-img"></i>
    修改密码
</div>

2. 在子组件methods中定义changeOverflow方法，$emit(自定义事件的名称, 发送给父组件的数据

changeOverflow() {
   // changeOverflow为自定义事件的名称，this.overflowHome，为发送给
　 // 父组件的数据
  this.$emit('changeOverflow',this.overflowHome) 
}

3. 在父组件中 @+子组件自定义的事件名称="事件方法名称"

<Setting ref="setting" @changeOverflow="changeOverflow"></Setting>

4. 在父组件中，定义事件方法，将子组件传过来的数据赋值给父组件

changeOverflow(overflow) { // 参数overflow为子组件发送给父组件的数据
   this.overflow = overflow;
}

二、跨组件间的数据通信

非父子组件间的数据通信：使用一个空的Vue实例作为事件中央总线(bus)

这种方法巧妙轻量地实现了任何组件间的通信，包括父子、兄弟、跨级组件。在项目不大的情况下可以用，项目较大可以用vuex来管理数据状态

1. 新建一个bus.js 在bus.js中：

import Vue from 'vue';

export var bus = new Vue();

2. 在发送组件中：

import { bus } from '...bus.js'

bus.$emit("自定义事件名称", "传入数据")

backtoHome() {
   this.$router.push('/home');
   bus.$emit('overfl-visi',this.overflVisible);
}

3. 在接收数据组件中：实例初始化时，监听来自发送组件 bus的实例事件

import { bus } from '...bus.js'

bus.$on("发送组件自定义事件名称", function(data){}) // data参数为接收到的数据

mounted () {
   var _this = this;
   bus.$on('overfl-visi', function(overflow){
   _this.overflow = overflow;
 })
}