vue 组件封装

动态组件

<component :is="current.comName"></component>
:is  组件名字

引入
import A from '@/components/childComponent/A.vue'
import B from '@/components/childComponent/B.vue'
import C from '@/components/childComponent/D.vue'

data（）{
    list: [
        {
          name: "我是组件A",
          comName: A,
        },
        {
          name: "我是组件B",
          comName: B,
        },
        {
          name: "我是组件C",
          comName: C,
        },
      ],

<component :is="A"></component>
<script>
import A from '@/components/childComponent/A.vue'
</script>

全局组件

vue 3

import {createApp} from 'vue'
import App from './App.vue'
import './assets/css/reset.less'
import CusCard from './components/CusCard.vue'
const app = createApp(App)
// 注册全局组件
app.component('cus-card', CusCard)
app.mount('#app')

vue 2

import Aa from '../src/components/a.vue'
Vue.component('Aa', Aa);

//使用
 <Aa text='----'></Aa>