组件的通信

为什么要进行组件通信？

• 组件是一个聚合体，将来项目要合并，那么必然各个组件之间需要建立联系，这个联系就是数据通信

分类

父子组件通信

1. data选项为什么是一个函数？
   - 组件是一个聚合体，也是一个整体，它需要一个独立的作用空间，也就是它的数据需要是独立的，目前js的最大特点是函数式编程，而函数恰好提供了一个独立作用域，所以我们data在出根组件外都是函数。
2. 为什么data函数需要返回一个返回值，返回值是对象，为什么不是数组吗？
   - Vue通过es5 的Object。definePerproty属性对一个对象进行getter 和 setter设置，而data选项是作为Vue深入响应式核心的选项
3. 过程
   - 父组件将自己的数据同 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>

4. props属性数据验证
   • 验证数据类型
   • 验证数据大小 [ 判断条件 ]

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

• 第三方验证
  • TypeScript [ TS ]
  • 插件 vue-validator 等

子父组件通信

1. 是通过自定义事件
   1. 事件的发布
      • 通过绑定元素身上实现
   2. 事件的订阅
      • 通过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
      }
    },
    methods: {
      fn ( val ) {
        this.gk = val 
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 5000
      }
    },
    methods: {
      giveHongbao () {
        this.$emit('give',this.money)
      }
    }
  })
  new Vue({
    el: '#app'
  })

非父子组件通信

1. ref链
2. 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'
  })