从上到下（父传子）

• 在父组件的组件标签上通过v-bind绑定要传递的数据，然后在子组件内部通过props接收

// 父组件
<select-list :dataList="dataArr" @parentReceive="changeVal"/>
// 子组件
props: ['dataList']    

从下到上（子传父）

• 在子组件中定义一个方法，然后在方法里面通过this.emit有两个参数(自定义事件名称，要传递的数据))；

selectVal (val) {
      // 第一步
      this.$emit('parentReceive', val) // 第一个参数：自定义事件名称；第二个参数要传递的数据
}

• 在父组件的子组件标签上通过@自定义事件名称监听，然后通过回调函数去处理响应的逻辑

<template>
    <select-list :dataList="dataArr" @parentReceive="changeVal"/>
 </template>

 <script>
     changeVal (val) {
      console.log(`我是子组件传递过来的数据${val}`)
    }  
 </script>

兄弟组件之间的传值

• 方法一：先子传父，在父传子

• 方法二：借助中央事件通信（跨组件通信）

（1）在要传递数据的组件通过$emit(自定义事件名称，要传递的数据)

import bus from '../../main'
selectVal (val) {
      bus.$emit('reveive', val)
    }

（2）在目标组件通过on('自定义事件名称', 回调函数)

import bus from '../../main'
bus.$on('reveive', val => {
      console.log(val)
      this.value = val
 })

（3）PS：on都要挂载到Vue空实例上，而这个空实例要全局使用因此需要在main.js创建

let bus = new Vue()
export default bus