2

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

在 about router 中，这里是 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');
      });
    });
  },
}

测试组件使用了元素加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

4

2 回答 2

3

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

Vue 3 与 Vue 2 非常不同 - 许多全局 API（例如组件注册）不再是全局的，而是紧贴“应用程序实例”（由创建createApp）

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

您必须在要在...中使用它们创建的每个应用程序实例中注册组件。createApp

于 2021-03-20T18:54:14.420 回答
0

正如@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');
      });
    });
  },
}
于 2021-03-21T01:23:30.820 回答