插槽、具名插槽和作用域插槽_提供检查道具等检查插槽的功能

插槽、具名插槽和作用域插槽

Vue插槽检查器 (vue-slot-checker)

vue-slot-checker provide functions like checking props.

vue-slot-checker提供诸如检查道具的功能。

<template>
  <div>
    <header><slot name="header" /></header>
    <div><slot /></div>
  </div>
</template>

<script>
export default {
  slots: ['default', 'header'], // require default slot and header slot
};
</script>

When using components that require default slot.

当使用需要默认插槽的组件时。

<template>
  <div>
    <SampleComponent />
  </div>
</template>

It is output to the console as shown in the next image.

它将输出到控制台，如下图所示。

安装 (Install)

$ yarn add vue-slot-checker

Plugin or Mixin.

插件或Mixin 。

插入 (Plugin)

Install plugin

安装插件

import Vue from 'vue';
import VueSlotChecker from 'vue-slot-checker';
 
Vue.use(VueSlotChecker);

混合蛋白 (Mixin)

Use with component

与组件一起使用

<script>
import { vueSlotCheckerMixin } from 'vue-slot-checker';

export default {
  mixins: [vueSlotCheckerMixin],
};
</script>

用法 (Usage)

slots option

slots选项

• type: Boolean | Array | Object

  类型： Boolean | Array | Object Boolean | Array | Object

布尔示例 (Boolean example)

Require only default slot.

仅需要默认插槽。

export default {
  slots: true,
};

数组示例 (Array example)

Require default slot and header slot.

需要默认插槽和标头插槽。

export default {
  slots: ['default', 'header'],
};

对象实例 (Object example)

Require default slot. header slot is require and only text.

需要默认插槽。 标头插槽是必填项，只能是文本。

export default {
  slots: {
    default: {
      required: true,
    },
    header: {
      validator(slot) {
        if (typeof slot === 'undefined') {
          return false;
        }
        return typeof slot[0].tag === 'undefined' && typeof slot[0].text === 'string';
      },
    },
  },
};

选件 (Options)

silent (选项) (silent (option))

• type: Boolean

  类型： Boolean

• default: Vue.config.silent (false)

  默认值： Vue.config.silent (false)

  • https://vuejs.org/v2/api/#silenthttps://vuejs.org/v2/api/#silent

Don't output to log.

不输出到日志。

e.g.

例如

import Vue from 'vue';
import VueSlotChecker from 'vue-slot-checker';
 
Vue.use(VueSlotChecker, {
  silent: true,
});

在环境中切换的示例 (Example of switching in the environment)

import Vue from 'vue';
import VueSlotChecker from 'vue-slot-checker';

// When not used as a plugin
if (process.env.NODE_ENV === 'development') {
  Vue.use(VueSlotChecker);
}

// When using the silent option
Vue.use(VueSlotChecker, {
  silent: process.env.NODE_ENV !== 'development'
});

// When using the Vue.config.silent
Vue.config.silent = process.env.NODE_ENV !== 'development';
Vue.use(VueSlotChecker);

翻译自: https://vuejsexamples.com/provide-the-function-to-check-slot-like-checking-props/

插槽、具名插槽和作用域插槽