Vue中component组件的使用

在业务开发中经常遇到功能类似但是UI不一致的组件，如果使用多个v-if的话页面会变的及其啰嗦，所以可以使用component组件来统一渲染。

1. 创建commonComponents

<template>
  <div>
    <colArrow
      v-if="getComponent && useCol"
      class="lc-ml-8"
      @toToggleComponent="toToggleComponent"
    />
    <component
      :is="getComponent"
      :active="active"
      :nodeName="nodeName"
      @update:node-name="updateNodeNameByNodeId"
      @openSetting="openSettingPanel"
      @delete="deleteComponent"
    />
  </div>
</template>
<script setup lang="ts">
import ColArrow from '@/views/lowCodeDetail/arrowComponents/colArrow.vue'
import { computed } from 'vue'
import { COMPONENTTYPE } from '@/views/lowCodeDetail/hooks/componentType'

const props = defineProps({
  // 是否使用内部的线;即colArrow组件
  useCol: {
    type: Boolean,
    default: true
  },
  // 是否处于活跃状态
  active: Boolean,
  // node的名字
  nodeName: String,
  // node的类型
  nodeType: String
})
const emit = defineEmits([
  'toToggleComponent',
  'updateNodeNameByNodeId',
  'openSettingPanel',
  'deleteComponent',
  'update:node-name'
])

const getComponent = computed(() => {
  switch (props.nodeType) {
    case COMPONENTTYPE.API:
      return 'ApiComponents'

    case COMPONENTTYPE.NOTICE:
      return 'NoticeComponents'

    case COMPONENTTYPE.SCRIPT:
      return 'ScriptComponents'

    case COMPONENTTYPE.JSON:
      return 'JsonComponents'

    default:
      return null
  }
})

const toToggleComponent = () => {
  emit('toToggleComponent')
}

const updateNodeNameByNodeId = (val: string) => {
  emit('update:node-name', val)
  emit('updateNodeNameByNodeId', val)
}

const openSettingPanel = () => {
  emit('openSettingPanel')
}

const deleteComponent = () => {
  emit('deleteComponent')
}
</script>
<style scoped lang="scss"></style>

2. 创建注册文件register.ts文件

import { App } from 'vue'
import lodash from 'lodash'
import ApiComponents from '../components/apiComponents.vue'
import JsonComponents from '../components/jsonComponents.vue'
import NoticeComponents from '../components/noticeComponents.vue'
import ScriptComponents from '../components/scriptComponents.vue'

// 画布通用组件, 即内部不能添加子组件的组件
const components = [
  ApiComponents,
  JsonComponents,
  NoticeComponents,
  ScriptComponents
]

const commonComponents = (app: App): void => {
  components.forEach((component) => {
    app.component(lodash.upperFirst(component.__name), component)
  })
}

export default commonComponents

3. 在main.ts中注册

const app = createApp()
commonComponents(app)

4. 在业务文件中使用

<common-component
  :active="item.active"
  v-model:node-name="item.nodeName"
  :node-type="item.nodeType"
  @toToggleComponent="toToggleComponent(item.nodeId)"
  @update:node-name="
    (val) => updateNodeNameByNodeId(item.nodeId, val)
  "
  @openSetting="openSettingPanel(item)"
  @delete="deleteComponent(item)"
/>