在思否问答区看到一个这样的问题

发布于3月7日,浏览量几百但是没有一个人回答,难道是问题太low?哈哈哈哈。总的来说这个问题出现的原因就是非要使用vue2的语法来运行vue3的东西,他不配套呀!!还有些同学在vue3中使用export default来导出,捂脸笑~

以下是vue3中注册组件的用法:

使用defineComponent 

defineComponent
// 全局注册
main.js
import { createApp } from 'vue';
import ComA from './components/ComA.vue';
import App from './App.vue';
const app = createApp(App);
app.component('com-a', ComA);
app.mount('#app');

至此可以在任意地方使用<com-a>组件

// 局部注册
import {defineComponent} from 'vue';
import ComA from './components/ComA.vue';
export default defineComponent({
    name: 'App',
    components: {
        ComA
    },
    setup() {
        return {};
    }
});

或者也可以注册为异步组件

// defineAsyncComponent
import {defineComponent, defineAsyncComponent} from 'vue';
export default defineComponent({
    name: 'App',
    components: {
        ComA: defineAsyncComponent(() => import('./components/ComA.vue'));
    },
    setup() {
        return {};
    }
});

总结来说,多看一下vue文档,vue2迁移的话刚开始可能有些不适应, 毕竟好多地方用法不同, 多用用就好了

Logo

前往低代码交流专区

更多推荐