组件通信

组件的通信

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

分类

父子组件通信

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

• 父组件将自己的数据同v-bind绑定在子组件身上
• 子组件通过props属性接收
  

props属性数据验证

• 验证数据类型
• 验证数据大小【判断条件】[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZD2TyvP-1571896412521)(en-resource://database/1750:1)]

子父组件通信

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

非父子通信

• 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'
  })