props校验 动态组件 keep-alive组件-- 指定缓存 激活失活 插槽

1.props校验

普通的  props:["prosA"]
//校验数据
props:{
    
    
   type:类型
   required:
   default:'' || () =>[]
   validator : val=>{
    
    }
}

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.动态组件

● is只能是动态属性=》:is=“组件注册后的标签名字符串或data变量” ● 不能直接拿注册标签名赋值使用

vue内置component组件, 配合is属性, 设置要显示的组件标签名字

<template>
//动态显示组件使用   vue内置
//动态绑定is ,他的值就是组件名字  
<components   :is="变量"   > </components>
</template>

**变量最好用组件来方便使用**
components:{
    
    
组件名
}

作用: 动态载入组件,component (理解一个容器,装入各种组件)
有应用场景 :tab切换

keep-alive

组件缓存
**作用 :保存组件 ,在组件 切换的失后,不被销毁 (减少ajax传输增加服务器压力)
**

2.1它会让被缓存的组件多出两个钩子 ● activated - 激活 ● deactivated - 失去激活状态

组件切换会导致组件被频繁销毁和重新创建, 大多数情况下是有自己的意义的，但也可能会导致不必要的性能损耗
使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

<keep-alive>   <component :is="xxxx" />   </keep-alive>

2.2组件进阶-keep-alive组件-指定缓存

//掌握keep-alive的include属性的用法语法
1. include="组件名1,组件名2..."
2. :include="['组件名1'， '组件名2']"

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

3.插槽

3.1默认插槽

3.2组件进阶-具名插槽

定义： <slot name="xxx">
使用： 
● <template #xxx></template>;
● <template v-slot:xxx></template>

作用: 允许传入自定义结构

3.3理解方法

//子组件   在组件内部挖坑
<slot>   默认(匿名)插槽,没有名字坑  </slot>
<slot    name="  one">    具名插槽,有名字坑   </slot>

//填坑 //父组件  //使用组件时,用自己内容去填坑

//写法二 
<template  v-slot:one>
//  one 填坑
<p>tow</p>
< /template >
//写法一
<template #one>
//  one 填坑
<p> one的内容 </p>
< /template >

1. 传入的标签可以分别派发给不同的slot位置
2. v-slot一般跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析为内部标签)

4.作用域插槽

原理:
步骤:● 创建子组件, 准备slot, 在slot上绑定属性和子组件值
● 使用子组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
● 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置
● 具名插槽, 给slot绑定属性和值

应用场景:自定义的表格组件，
允许用户传入：自定义的结构 + 数据（从插槽中回传的）

4.1作用域插槽 小结 : 组件内变量绑定在slot上, 然后使用组件v-slot:插槽名字=“变量” ，变量上就会绑定slot传递的属性和值

5.自定义指令(了解)

作用:vue提供的指令不够用了，自己定义拓展，增强 元素的功能
定义:

例如
<p  v-color="red"/>

使用:  <标签  v-指令名="值"/>