// 父组件
<Son :msg="message" :user="userinfo"></Son>
// 使用子组件，通过属性向子组件传值，可以是任意值、方法，甚至是父组件对象this
// 注意：这里如果没用v-bind，则传递的是字符串message和userinfo
// 注意：age="18" --> 表示传入的age是一个字符串18；:age="18" --> 表示传入的age是数字18
// 使用了v-bind，则属性值就是一个js表达式
<script>
export default {
  data() {
    return {
      message: 'hello',
      userinfo: { name: 'zs', age: 20 }
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <h5> Son 组件</h5>
    <p>父组件传递过来的msg值是：{{ msg }}</p>
    <p>父组件传递过来的user值是：{{ user }}</p>
  </div>
</template>
<script>
export default {
  data(){
  },
  props:['msg', 'user']     // 子组件中定义 自定义属性来接收数据
  // 接收到的数据在组件实例对象vc身上(属性)
}
</script>

// click点击事件的本质(vue是怎么操作的)
$emit('click', {
  clientX: '',
  clientY: '',
  target: dom元素
})
------------------------------------------------------------
// eg:
// 子组件通过定义事件child-msg的方式将msg传给父组件
// 子组件中有个button按钮，并为其添加click事件
<template>
  <button @click="deliver"></button>
</template>
<script>
  export default {
    data(){
      return {
        msg: '我是子组件的数据'
      }
    },
    methods: {
      // 按钮点击事件的处理函数
      // 当点击的时候使用$emit()触发事件，把message传给父组件
      deliver(){
        this.$emit('child-msg', this.msg)
      }
    }
  }
</script>
---------------------------------------------------------------
// 父组件在使用子组件的时候，绑定子组件自定义的child-msg事件
<template>
  <Son @child-msg="getChildMsg"></Son>
</template>
<script>
export default {
  data(){
    return {
      message: ''   // 这里的值类型得根据需要传递的类型写
    }
  },
  methods: {                // 通过回调函数来接收数据
    getChildMsg(val){       // 定义形参val接收数据
      this.message = val    // 将子组件传过来的数据转存到父组件
    }
  }
}
</script>

// eventBus.js文件（核心）
import Vue from 'vue'
// 向外共享Vue的实例对象
export default new Vue()
// 谁导入eventBus.js,谁就能获得一个Vue实例对象

// 兄弟组件Left(数据发送方)
<template>
  <button @click="sendMsg"></button>
</template>
<script>
  import bus from './eventBus.js' // 导入eventBus.js，用bus接收，得到一个Vue实例
  export default {
    data() {
      return {
        msg: 'hello vue.js' // 要发送的数据
      }
    },
    methods: {
      sendMsg(){
        bus.$emit('share', this.msg)    // 自定义share事件，并且传递了msg的数据
      }
    }
  }
</script>

// 兄弟组件Right(数据接收方)
<script>
  import bus from './eventBus.js'     // 导入eventBus.js，用bus接收，得到一个Vue实例
  export default {
    data() {
      return {
        msgFromLeft: ''
      }
    },
    created() {         // 周期函数created()   注意：固定的要写在这个函数里面
      bus.$on('share', val =>{    // $on()绑定share事件，触发事件后调用处理函数，形参val接收Left组件传递的值
        this.msgFromLeft = val
      })
    }
  }
</script>