组件进阶props校验普通格式： props: ["propA", "propB"]。没有类型检查高阶格式:可以进行

props校验

普通格式： props: ["propA", "propB"]。没有类型检查
高阶格式:可以进行数据类型检查。不是这个类型传递过来会报错

 props: {
    'abc': {
      required: true,
      // required为true,abc必须要传入值不然控制台报错,不写他不传值也不会报错
      // 默认值：基本数据类型，就直接写
      default: '' 
    },
    list: {
      type: Array, //校验父组件传递过来的数据类型是否是数组类型
          //type作用校验数据类型
      default: () => []  //没有任何值的时候默认的值
      // 默认值：引用数据类型要写函数return
      // default: function(){
      //   return ['默认值', '默认值']
      // }
    },
    status: {
      // 当属性传入，validator会自动执行,接收参数
      // 如果validator函数返回true,表示校验通过
      validator: function (value) {
        console.log(value)
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },

动态组件

<component :is="comName"></component>     
//vue内置的组件,可以动态显示组件,动态绑定is,is的值就是给组件名赋值的data变量,用来控制要把哪个组件装进去

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

keep-alive组件

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

<!--<keep-alive> 不加这个标签,当组件切换后,子组件表单输入的内容会销毁,加了这个标签后,组件切换后子组件会保存在内存中不被销毁 -->
    <!-- include:指定需要被缓存的组件的名字,以component中定义的为准 -->
<keep-alive :include="['UserName','UserInfo']">
       <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

keep-alive组件-指定缓存

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

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

补充生命周期:

activated - 激活,
deactivated - 失去激活状态

 activated() { console.log('子组件激活')}, //当切换为当前子组件时控制台会打印激活
 deactivated() { console.log('子组件失去激活状态')},//当切换出当前子组件后控制台会打印

插槽

格式:<slot>默认展示的内容</slot>

<template>
     <MyCom> 
        // 默认插槽
         <div>
         <h1>好的</h1>
         <h1>成功</h1>
       </div> 
      //具名插槽 需要使用template包着,传值的时候定义一个名字,子组件接收
     <template v-slot:one> //v-slot简写方式#:one
         <div>
           <h2>我是父组件</h2>
         </div>
       </template>  
     </MyCom>
</template>

具名插槽 格式:

定义:<slot name="one">:</slot> 父组件里也要使用one名字

使用:

<template #xxx></template>

<template v-slot:xxx></template>

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

作用域插槽

子组件中的数据, 在给插槽赋值时在父组件环境下使用=> 子传父=>传数据

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

<slot name="content" :a="1" :b="2"> //会将a和b的值传到父组件里
      默认内容
 </slot>

自定义指令

格式:directives{ 指令名{配置项,有特殊固定的格式} }

<template>
  <div>
    //调用自定义指令名也是以v-开头的
    <p v-color="'red'">好人</p>
    <p v-color="myCOlor">向上</p>
    <button @click="myCOlor='hotpink'">点我</button>
  </div>
</template> 

data() {
    return {
      myCOlor:'blue' //定义变量
    }
  },
directives:{ //vue指令属性
      //inserted是指令的生命周期钩子,他会自定执行 , 当元素加载到页面时,自动触发,el就是标签
    color:{ //自定义指令名
        //元素插入页面执行
        // v-color="myColor" ===>myColor就会自动保存在binding.value中
        inserted(el,binding){ //固定配置项 - 当指令插入到标签自动触发此函数
          console.log('v-color',el,binding.value);
          el.style.color=binding.value
        },
        update(el,binding) {  // 更新绑定的变量时触发此函数,手动更新
          console.log('更新',el,binding)
          el.style.color=binding.value
        },
    }
  }