Vue 3从vue.js中的第三方库扩展了defineComponent组件
Vue 3从vue.js中的第三方库扩展了defineComponent组件
提问于 2021-03-20 15:57:37
我想在组件中使用第三方库元素。在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');
});
});
},
}测试组件使用了元素+ 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>我添加了元素+，并在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');
我发现了这个问题从第三方库扩展vue.js组件
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-03-20 18:54:14
我真的不明白你想通过扩展你的完美的组件来实现什么，但是.
Vue 3与Vue 2有很大的不同--许多全局API(例如组件注册)都是不再是全球性的，但与"app实例“(由createApp创建)紧密相连。
因此，即使您在main.js (app.use(ElementPlus);)中注册元素组件，也是另一个应用实例(为什么！)在onMounted钩子中创建的about.vue组件对组件一无所知！这就是错误的原因..。
您必须在中注册组件，每个createApp创建的应用实例都要在.
Stack Overflow用户
发布于 2021-03-21 01:23:30
正如@Michal回答的那样，我需要在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');
});
});
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66723601
复制相关文章
相似问题
腾讯云开发者
