组件通信&&属性验证

组件通信 – 单项数据流 >9种

1. 为什么要进行组件通信？
   组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系
   ，这个联系我们就称之为通信
2. 组件通信的方式有以下几种（ 王者级 ）

1.父子组件通信： 父组件将自己的数据传递给子组件

  - 父组件将自己的数据通过属性绑定的形式传递给子组件
      `<Son :aa = "money"></Son>`
  - 子组件在自己的配置项中通过 props 来接收这个属性
      ```javascript
      Vue.component('Son',{
        template: '#son',
        // props: ['aa'],
        props: {
          // 属性： 属性的数据类型  给数据做属性验证，验证数据类型
          'aa': Number 
        }
      })
      ```
  - 这个属性可以直接向全局变量一样使用
    `<p> 我老爸给了我：{{ aa }} 钱 </p>`

问题1： props接收的money 和 子组件上绑定的自定义属性money是不是同一个？
- 是同一个
问题2： 自定义属性的书写
- money ----> money
- mask-flag ----> maskFlag

问题3： 为什么data要定义为一个函数？

1. 组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据
2. 也就是说这个数据应该有独立作用域，也就是有一个独立的使用范围，这个范围就是这个组件内
3. js的最大特征是：函数式编程 ， 而函数恰好提供了独立作用域

问题4： 为什么data要有返回值？返回值还是一个对象？

1. 因为Vue是通过observer来观察data选项的，所有必须要有返回值
2. 因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置

2.子父组件通信

 1. 自定义事件
   流程： 
     1. 父组件中定义一个数据，然后在methods定义一个方法用来修改这个数据
       ```javascript
       Vue.component('Father',{
          template: '#father',
          data () {
            return {
              num: 0
            }
          },
          methods: {
            add ( val ) {
              console.log('add')
              this.num += val
            }
          }
        })
       ```
     2. 父组件通过自定义事件的形式，将父组件的一个方法传递给子组件
        `<Son @aa = 'add'></Son>`
     3. 子组件可以通过 this.$emit( 自定义事件名称，参数1，参数2...) 来订阅这个自定义事件
        `this.$emit('aa',this.money)`
 2. 父组件将一个方法直接通过单向数据绑定的形式传递给子组件，子组件通过props接收，然后直接使用

<template id="father">
    <div>
      <h3> 这里是father </h3>
      <p> 我这里有 {{ num }} 钱 </p>
      <hr>
      <Son :add = 'add'></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son </h3>
      <button @click = "add( money )"> give money </button>
    </div>
  </template>

  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      add ( val ) {
        this.num += val
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 1000
      }
    },
    props: ['add']
  })

3. 父组件可以将一个对象型的数据传递给子组件，子组件修改了这个数据，父组件也同样会修改
   - 这个形式违反了单向数据流，用的少

3.非父子组件通信

1. 使用ref链绑定
   this.$parent.$refs.sister.jk += this.money
2. 使用事件总线（bus总线）

//组件1
methods: {
      give () {
       bus.$emit('aa',this.money)
      }
    }
//组件2
mounted () {
      bus.$on('aa',( val ) => {
        this.jk += val
      })
    }

4. 多组件的状态共享 vuex
5. 多级组件通信 $attr
6. vue-router

属性验证

例如： 价格的增加 ， 拿到的数据必须做验证 309 + 10 319 30910

1. props: [ ‘msg’ ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据
2. props: { attr: attrType } 进行普通属性验证
3. props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
4. props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

注意： 除了以上形式的属性验证以外，将来工作中还可能遇到的是 第三方封装的类库 vue-validate vee-validate …