Vue组件之间的通信-父子、子父、非父子组件通信

组件

---

• 1.data选项为什么是函数?
  • 组件是一个整体，它的数据也应该是独立的，函数形式可以给一个独立作用域，目前js的最大特点是函数式编程，而函数恰好提供了一个独立作用域，所以我们data在出根组件外都是函数
• 2 .返回值为什么是一个对象？
  • Vue特点：深入响应式
    • data 选项要劫持【es5中的Object.defineProerty】的getter和setter，而data选项是作为Vue深入响应式核心的选项
  • data选项在组件的模板里相当于一个全局变量
  • 所有的与组件相关的必须卸载组件的模板里面

组件之间的通信

---

• 组件直接为什么要进行通信？
  • 组件是一个聚合体，将来项目需要合并，那么必然各组件之间需要建立联系，这个联系就是数据通信
• 组件通信分类
  • 父子组件通信
  • 子父组件通信
  • 非父子组件通信
  • 多组件状态【数据】共享–Vuex
  • 路由—Vue-router

父子组件通信

---

• 过程
  • 父组件将自己的数据同v-bind绑定在子组件身上，使用单向数据绑定，将一个数据绑定给一个自定义的属性
  • 子组件通过props属性接收，接收到的属性可以像全局变量一样的形式再该组件的模板里使用。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:

        <Father></Father>
        

      • DIV

        <div>
          <h3> 这里是son </h3>
          <button @click = "giveHongbao"> 给父亲红包 </button>
        </div>
        

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

非父子组件通信

---

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

  • 非常规手段进行组件通信 【如果标准方案可以实现，就不要用非常规手段】
    • 可以实现子父通信
    • 父子间通过单项数据绑定一个方法给组件
    • 子组件通过props选项接收这个方法，然后直接调用
    • 父组件通过单项数据绑定一个对象型数据给子组件
    • 子组件直接使用，如果更改这个数据，那么父组件数据也更改了
      • 原因：同一个地址，但是违背了单项数据流
      • 解决方案：多组件共享【Vuex】