<component :is='Plus'> <component>

这是Vue.js中的动态组件加载语法。`:is`是一个特殊的属性，用于动态地切换当前渲染的组件。在这个例子中，`<component :is='Plus'>`表示当绑定的表达式`'Plus'`（假设是一个变量或计算结果）为真或者等于"Plus"时，会渲染指定的名为"Plus"的组件。这个特性常用于需要根据条件或数据变化动态选择要显示的组件的情况。

举个例子，如果你有一个数组`components`包含多种类型的组件实例，你可以通过`v-for`遍历它，并设置`:is`来决定渲染哪一个：

<template>
  <div>
    <component v-for="item in components" :key="item.name" :is="item.componentName"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: [
        { componentName: 'Plus', ... }, // 样例组件一
        { componentName: 'Minus', ... }, // 样例组件二
        // 更多组件...
      ]
    }
  }
}
</script>

相关问题

import { computed } from 'vue' const props = defineProps({ // icon 图标 icon: { type: String, required: true }, // 图标类名 className: { type: String, default: '' } }) // 判断是否为外部图标 const isExternal = computed(() => { return /^(https?:|mailto:|tel:)/.test(props.icon) }) // 如果是element-plus图标，将具体组件绑定到变量中。用于component标签使用。 let iconComponent = null if (!isExternal.value) { iconComponent = Icons[props.icon] } /** * 外部图标样式 */ const styleExternalIcon = computed(() => ({ mask: `url(${props.icon}) no-repeat 50% 50%`, '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%` })) 将以上代码用vue2重写

在Vue2中，需要使用`Vue.extend()`方法创建组件，然后在`template`中使用。以下是重写后的代码：

<template>
  <div>
    <component :is="iconComponent" :class="props.className" v-if="!isExternal"></component>
    <span :style="styleExternalIcon" :class="props.className" v-else></span>
  </div>
</template>

<script>
import { computed } from 'vue';
import Icons from './icons'; // 导入图标组件

export default {
  props: {
    // icon 图标
    icon: {
      type: String,
      required: true
    },
    // 图标类名
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 判断是否为外部图标
    isExternal() {
      return /^(https?:|mailto:|tel:)/.test(this.icon);
    },
    // 如果是element-plus图标，将具体组件绑定到变量中。用于component标签使用。
    iconComponent() {
      if (!this.isExternal) {
        return Icons[this.icon];
      }
    },
    // 外部图标样式
    styleExternalIcon() {
      return {
        mask: `url(${this.icon}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.icon}) no-repeat 50% 50%`
      };
    }
  }
}
</script>