1.props校验

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

2.动态组件 （tab切换）

• 多个组件使用同一个挂载点，并可以动态切换，这就是动态组件
• 配合keep-alive组件使用 格式 <component :is="comName"></component>

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>
    
      <!-- vue内置的组件component, 可以动态显示组件 -->
      <component :is="comName"></component>
      
  </div>
</template>

<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

3.keep-alive组件

1. 背景

• 组件切换会导致组件被频繁销毁和重新创建, 大多数情况下是有自己的意义的，但也可能会导致不必要的性能损耗

2. 使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁， 而是缓存

<keep-alive>
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

3. 组件进阶-keep-alive组件-指定缓存

• 语法

1. include="组件名1,组件名2..."
2. :include="['组件名1'， '组件名2']"

<keep-alive include="name1,name2">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

注意：

• 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)

4.默认插槽和具名插槽，作用域插槽

• 默认插槽和具名插槽
• 作用域插槽

5.自定义指令

• 需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令 示例 自动获取焦点

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  // 注册
  directives: {
    focus: { // 自定义指令名
        inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
            el.focus()
        }
    }
  }
}
</script>

1. 自定义指令-传值和更新

directives: {
  "color":{
    inserted(el, binding){ // 插入时触发此函数
      el.style.color = binding.value;
    },
    update(el, binding){ // 更新绑定的变量时触发此函数=》手动更新
      el.style.color = binding.value;
    }
  }
}