replace-components-plugin

介绍

谨慎使用

该插件可以通过定义 replaceComponents 字段替换自己及其后代组件的 components

使用前需要全局注册该插件

import Vue from 'vue'
// 打包后应该从lib目录引入
import replaceComponentsPlugin from '@ykc/ykc-ui/lib/utils/replace-components-plugin'

Vue.use(replaceComponentsPlugin)

简单使用

我是通过 replaceComponents 覆盖的 ykc-button

<template>
  <ykc-button>click me</ykc-button>
</template>

<script>
  export default {
    replaceComponents: {
      // 一般是使用大写字母开头的驼峰格式
      YkcButton: {
        render(h) {
          return <div style="color:var(--theme-color-primary)">我是通过 replaceComponents 覆盖的 ykc-button</div>;
        },
      },
    },
  };
</script>

显示代码 复制代码 复制代码

高级用法

TIP

结合 extends 使用可以达到事半功倍的效果。

<template>
  <div>
    <comp-a type="primary">primary变danger</comp-a>
    <comp-a type="warning">warning</comp-a>
  </div>
</template>

<script>
  const CompA = {
    props: ['type'],
    render(h) {
      return <el-button type={this.type}>{this.$slots.default}</el-button>
    }
  }
  export default {
    components: {
      CompA,
    },
    replaceComponents: {
      CompA: {
        extends: CompA,
        render(h) {
          if (this.type === 'primary') return <el-button type="danger">{this.$slots.default}</el-button>;
          return CompA.render.call(this, h)
        }
      },
    },
  };
</script>

显示代码 复制代码 复制代码