组件通信的几种方式

vue中有多种组件，父组件、子组件、兄弟组件等，这些组件之间的传值方式也是不同得

1. 父传子

这种传值方式比较简单，子组件只需用props将父组件传递过来的数据接收，即可使用

//父组件代码：
<p>这是父组件</p>
<input type="text" v-model="parentData">
<Childrenfrt :parentData="parentData" ></Childrenfrt>

//子组件代码：
props: {
 parentData: { type: String, required: true }
}

此时子组件中已经收到了父组件传来的数据

2. 子传父

子组件传值给父组件需要通过一个自定义得方法，父组件监控这个方法来获得子组件传过来的值。子组件通过this.$emit将数据放在setData方法中，父组件通过监控setData这个方法将值取出。

//子组件代码：
<p><input type="text" v-model="children1Data"></p>
<p><button @click="sentChildData">点击传值给父组件</button></p>

export default {
  name: 'Childrenfrt',
  data() {
    return{
      children1Data: ''
    }
  },
  methods: {
    sentChildData() {
      this.$emit('sentData', this.children1Data)
    }
  }
}
</script>

//父组件代码：
<Childrenfrt  @sentData="sentData"></Childrenfrt>

<script>
export default {
  name: 'Index',
  data() {
    return{
      childData: ''
    }
  },
  methods: {
    sentData(val) {
      this.childData = val
    }
  }
}
</script>

3.兄弟组件之间

兄弟组件指的是平级之间的组件，他们中得传值方式比较多

1.第一种是属于一种比较麻烦的方法，可以将值先传给父组件，再通过父组件传值给子组件得传值方式传值给另一个子组件

2.可以使用Bus事件总线，创建一个中转站来进行传值。

创建一个bus文件夹，在文件夹中新建index.js文件

import Vue from 'vue'

const Bus = new Vue()

export default Bus

在main.js中引用

import Bus from './bus/Bus'

Vue.prototype.$bus = Bus   // 在vue原型上添加$bus属性

在方法中使用：通过 this.$ bus.$emit将值放入setDataToBrather中

 this.$bus.$emit('setDataToBrather', this.children1Data)   // 第一个参数是自己创建的方法名，第二个参数是要传递得数据

取值得方法：通过$on将值取出，第一个参数还是之前传递的方法名，第二个参数是一个函数，函数中得参数就是传递得值，最后别忘了在beforeDestroy钩子函数中将这个线程关闭

created() {
	this.$bus.$on('setDataToBrather', (val) => {
		this.ChildrenSecData = val
	})
},
beforeDestroy() {
	this.$bus.$off('setDataToBrather')
}