Vue 3 在defineComponent 中从第三方库扩展了vue.js 组件

问题描述

我想在我的组件中使用第三方库 element-plus。在 setup 中，defineComponent 表示该组件。在控制台中，它会警告 Failed to resolve component: el-radio at <App>

关于路由器，这里是about.vue

<template>
  <div id="popup-content"></div>
</template>

<script>
import {
  onMounted,createApp,defineComponent,nextTick,} from 'vue';
import Test from '@/components/Test.vue';

export default {
  setup() {
    onMounted(() => {
      const myNewComponent = defineComponent({
        extends: Test,});
      createApp(myNewComponent).mount('#popup-content');
      nextTick(() => {
        createApp(myNewComponent).mount('#popup-content');
      });
    });
  },}

测试组件使用了 element-plus el-raido 组件，Test.vue

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
export default {
  data() {
    return {
      radio: '1',};
  },};
</script>

我添加了 element-plus，并在 main.js 中注册了所有

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App);


app.use(ElementPlus);
app.mount('#app');

我发现了这个问题 Extend vue.js component from third-party library

解决方法

我真的很不明白你想通过扩展完美的 Test 组件来实现什么但是...

Vue 3 与 Vue 2 有很大不同 - 许多全局 API（例如组件注册）是 not global anymore，但与“应用实例”（由 createApp 创建）紧密相关

因此，即使您在 main.js (app.use(ElementPlus);) 中注册了 Element 组件，在 onMounted 组件的 about.vue 钩子中创建的另一个应用程序实例（为什么！？）对组件一无所知！这就是错误的原因...

您必须在由 createApp 创建的每个应用实例中注册组件，您希望在 ....

正如@Michal Levý 回答的那样，我需要在 createApp 创建的每个应用实例中注册组件。

这是 about.vue 的工作版本，以防有人需要。

<template>
  <div id="popup-content"></div>
</template>

<script>
import {
  onMounted,createApp,defineComponent,nextTick,} from 'vue';
import Test from '@/components/Test.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default {
  setup() {
    onMounted(() => {
      const myNewComponent = defineComponent({
        extends: Test,});
      const app1 = createApp(myNewComponent);

      nextTick(() => {
        app1.use(ElementPlus);
        app1.mount('#popup-content');
      });
    });
  },}

extends vuejs3