父子组件通信、子父组件通信、非父子组件通信、非常规手段进行组件通信

父子组件通信

 - 理解： data选项为什么是一个函数？

   - 组件是一个聚合体，也是一个整体，它需要一个独立的作用空间，也就是它的数据需要是独立的，目前js的最大特点是函数式编程，而函数恰好提供了一个独立作用域，所以我们data在出根组件外都是函数

 - 理解： 为什么data函数需要返回一个返回值，返回值还是对象，不能是数组吗？

   - Vue通过es5的Object.definePerproty属性对一个对象进行getter和setter设置，而data选项是作为Vue深入响应式核心的选项

 - 过程

   - 父组件将自己的数据同 v-bind 绑定在 子组件身上

   - 子组件通过 props属性接收

       <!-- 相当于父亲给儿子零花钱 -->
      <template id="father">
          <div>
              <h3> 这里是father </h3>
              <Son :money = "money"></Son>
          </div>
      </template>
      
      <template id="son">
          <div>
              <h3> 这里是son </h3>
              <p> 我收到了父亲给的 {{ money }} </p>
          </div>
      </template>
      
      <script>
        Vue.component('Father',{
          template: '#father',
          data () {
            return {
              money: 10000
            }
          }
        })
      
        Vue.component('Son',{
          template: '#son',
          props: ['money']
        })
      
        new Vue({
          el: '#app'
        })
      </script>

   - props属性数据验证

   - 验证数据类型

   - 验证数据大小【 判断条件 】

         // props: ['money']
         // 数据验证
         // props: {
         //   'money': Number 
         // }
         props: {
             'money': {
                 validator ( val ) { // 验证函数
                     return val > 2000
                 }
             }
         }

- 工作中： 第三方验证  

- TypeScript   [ TS ]  

- 插件   vue-validator  等  

子父组件通信

 - 是通过自定义事件    

   - 事件的发布  
     - 通过绑定元素身上实现
   - 事件的订阅
     - 通过this.$emit触发

      // html <!-- 儿子给父亲红包 -->
      <div id="app">
          <Father></Father>
        </div>
        <template id="father">
          <div>
            <h3> 这里是father </h3>
            <p> 我现在有 {{ gk }} </p>
            <Son @give = "fn"></Son>
          </div>
        </template>
      
        <template id="son">
          <div>
            <h3> 这里是son </h3>
            <button @click = "giveHongbao"> 给父亲红包 </button>
          </div>
        </template>

      //js
      Vue.component('Father',{
          template: '#father',
          data ( ) {
            return {
              gk: 0//初始钱为0
            }
          },
          methods: {//父亲要收到儿子的红包需要一个事件处理程序
            fn ( val ) {
              this.gk = val //val是儿子要给父亲的钱，赋值给son的gk
            }
          }
        })
      
        Vue.component('Son',{
          template: '#son',
          data () {
            return {
              money: 5000//儿子要给父亲的钱
            }
          },
          methods: {
            giveHongbao () {
              this.$emit('give',this.money)//参一是绑定的事件fn，参二是传参到val
            }//事件的订阅通过this.$emit触发
          }
        })
        new Vue({
          el: '#app'
        })

非父子组件通信

 - ref链

 - bus事件总线

      var bus = new Vue()
      
        Vue.component('Father',{
          template: '#father'
        })
        Vue.component('Son',{
          template: '#son',
          data () {
            return {
              flag: false
            }
          },
          mounted () { // 也是一个选项，表示组件挂载结束 ， 也就是说我们可以在View视图中看到这个组件了
            // console.log( 'mounted ')
            // bus.$on(自定义事件名称，执行的事件处理程序)
            var _this = this
            bus.$on('cry',function () {
              _this.flag = true
            })
      
          }
        })
        Vue.component('Girl',{
          template: '#girl',
          methods: {
            kick () {
              bus.$emit('cry')
            }
          }
        })
        new Vue({
          el: '#app'
        })

非常规手段进行组件通信 【 不推荐 】

 - 建议： 如果标准方案可以实现，就不要用非常规手段

 - 1. 可以实现子父通信

   - 父组件通过 v-bind 绑定一个方法给子组件
   - 子组件通过 props选项接收这个方法，然后直接调用

 - 2. 父组件 通过  v-bind 绑定 一个对象类型数据 给子组件 
   3. 子组件直接使用，如果更改这个数据，那么父组件数据也更改了
      - 原因： 同一个地址
      - 非常规在哪里？
        - 违背了单向数据流