Vue 3 在 defineComponent 中扩展了来自第三方库的 vue.js 个组件

Question

我想在我的组件中使用第三方库 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

Answer 1

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

Vue 3 与 Vue 2 非常不同 - 许多全局 API（例如作为组件注册）是 not global anymore 但对“应用程序实例”（由创建createApp)

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

您必须在每个应用程序实例中注册组件createApp您想要在....

中使用它们

Answer 2

正如@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');
      });
    });
  },
}

Vue 3 在 defineComponent 中扩展了来自第三方库的 vue.js 个组件

Vue 3 extends vue.js components from third party library in defineComponent

vuejs3

extends

element-ui

element-plus