props校验

普通格式: props:["自定义属性1","自定义属性2"]。没有类型检查。

高阶格式:

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
      }
    }
  }

说人话就是:

props:{
   自定义属性名:{
  type:数据类型    //检查数据类型,不符合就报错
  required:true    //必须接受数据
  default:值       //用于简单数据类型的默认值
  default:()=>{}   //用于引用数据类型的默认值
  validator:function (value) {
        // 这个value值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
   }
}

动态组件

动态组件:多个组件使用同一个挂载点,并且可以动态切换。

格式:<component :is="comName"></component>

comName表示的是组件名,并且注意is只能是动态属性。以下为代码示例:

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>

    <p>下面显示注册组件:</p>
    <div style="border: 1px solid red">
      <!-- vue内置的组件component, 可以动态显示组件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>

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

keep-alive组件

keep-alive组件可以让其包裹的动态组件保存在内存中不被销毁,一般和component标签搭配使用,并且被其包裹的动态组件会补充两个生命周期:

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

其格式为:

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

keep-alive组件-指定缓存

语法

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

代码:

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

默认插槽

说明:在子组件中的template中先挖一个坑位,没人填坑就渲染slot中默认展示的内容,如果在父组件中用双标签并写了结构内容,就会渲染父组件中的结构内容。

具名插槽

说明:在子组件中给slot取个名字,然后在父组件用template标签使用(template标签不会渲染到页面上,一般被vue解析为内部标签)。

注意:v-slot: 可以简化成 #使用

作用域插槽

说明:在子组件中使用slot标签,并在slot上绑定属性和子组件值,然后在父组件中用template和v-slot="自定义变量名(一般都用scope接收)",自定义变量名会自动绑定slot上所有属性,就可以在父组件中使用子组件传来的值,并替换slot位置。示例:

自定义指令-基本使用

自定义指令定义方式:

{
  data(){},
  methods: {},
  directives: {
    focus: { // 自定义指令名
        inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
            el.focus()
        }
    },
  },
}

自定义指令-传值和更新

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

vue组件进阶