组件进阶使用--动态组件与插槽

1)props校检

普通格式： props: ["propA", "propB"]。没有类型检查

高阶格式:

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

多个组件使用同一个挂载点，并可以动态切换，这就是动态组件

场景: 同一个挂载点要切换 不同组件 显示

0. 创建要被切换的组件 - 标签+样式
1. 引入到要展示的vue文件内, 注册
2. 变量-承载要显示的组件名
3. 设置挂载点
4. 点击按钮-切换comName的值为要显示的组件名

注意:

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

示例:

<template>
  <div>
    <button @click="comName = 'UserName'">切换组件UserName</button>
    <button @click="comName = 'UserInfo'">切换组件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>

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

3)keep-alive组件

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

语法

使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁

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

加了keep-alive的组件,在进行切换时,不会被销毁和重新创建,会补充两个钩子函数:

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

4)keep-alive组件-指定缓存

指定想要缓存的组件,不被销毁

语法

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

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

5)默认插槽

如果外面不给传, 想给个默认显示内容

口诀: 夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示

<slot>默认内容</slot>

6)组件进阶 - 具名插槽

当一个组件内有2处以上需要外部传入标签的地方

传入的标签可以分别派发给不同的slot位置

要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

v-slot可以简化成#使用

v-bind可以省略成 : v-on: 可以省略成@ 那么v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

7)组件进阶 - 作用域插槽

子组件里值, 在给插槽赋值时在父组件环境下使用

场景: 默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容

注意:scope与row都非固定写法,可以修改名字,但一般都用这两个名(语义化)

口诀:

0. 子组件, 在slot上绑定属性和子组件内的值
1. 使用组件, 传入自定义标签, 用template和v-slot:插槽名字="自定义变量名" (v-slot:可简写为#)
2. scope变量名自动绑定slot上所有属性和值

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