vue的prop和组件的进阶

1.自动化的全局注册和模块系统中的局部注册

见vue的中文文档

2.prop验证：

function Custom () {}

Vue.component('my-component', {
  props: {
    A: {
      type: Custom,  // 基础的类型检查，也可以是自定义的构造函数，通过 instanceof 进行检查确认
      required: true,  // 是否必填
      default: '字符串'  // 默认值，对象或数组必须通过函数return返回默认值
    },
    // 简写
    B: Number,
    C: [String, Number],  // 判断多个可能的类型
    // 自定义验证函数
    D: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }  
    }
  }
})

注意：
1.三个属性值：type，requried，default
2.type可以是多个，放在[ ]内，并且type的值不仅可以是原生的构造函数，并且可以是自定义的构造函数，它会通过instanceof来判断是不是通过自定义类型构造的。
3.其中如果类型是对象或者数组的话，default必须是一个函数，并且返回一个相应的对象或是数组
4.使用validate函数，有一个参数value代表属性的值，可以限定属性的值在一个区间内选择

3.非prop的Attribute

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。

因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上。

3.1替换合并已有的attribute

对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type=“text” 就会替换掉 type=“date” 并把它破坏！庆幸的是，class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。

3.2 禁用attribute继承

如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false
这尤其适合配合实例的 $attrs property 使用

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>

注意：inheritAttr并不影响class还有style的继承。

4.自定义组件的v-model

v-model默认绑定的是text的属性值和input的事件，
可以通过在子组件中使用model来改变默认的设置

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<base-checkbox v-model="lovingVue"></base-checkbox>

这里绑定的是checked属性，lovingVue的值会传递给checked，并且当子组件调用change方法的时候，change方法携带一个参数，参数会改变lovingVue的值

5.原生事件绑定到组件

在子组件中可以通过$listeners来获取父组件中绑定的方法

<div id="app">
    A{{msg}}
    <my-button :msg="msg" @todo="handleClick"></my-button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '100'
      },
      methods: {
        handleClick () {
          console.log('点击事件')
        }
      },
      components: {
        'MyButton': {
          template: `<div @click="$listeners.todo">B</div>`,
          created() {
            console.log(this.$listeners) // 包含父级所有绑定的方法
          }
        },
        
      }
    })
  </script>

通过.sync实现父子组件之间的双向绑定

1.一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 $emit 。
其中，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件j监听获取子组件传过来的值。
如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。

2.例子：
father.vue

<template>
  <div class="app">
     {{dataApp}}
    <hr>
    <Child :money.sync="dataApp"/>
    // <Child :money="dataApp" v-on:update:money="dataApp = $event"/>  //两句作用等同
  </div>
</template>
 
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { dataApp: 10000 };
  },
  components: { Child }
};
</script>

children.vue

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
    </button>
  </div>
</template>
 
<script>
export default {
  props: ["money"]
};
</script>