[英]Vue plugin doesn't work when directly imported in Components
i created a simple vue plugin我创建了一个简单的 vue 插件
import myComp from "./myComp.vue";
export default {
install(Vue, options) {
Vue.component("my-plugin", myComp);
}
}
and imported it in main.js并将其导入 main.js
import MyPlugin from './myPlugin.js'
Vue.use(MyPlugin)
and everything is ok and i can use it anywhere, but when i want to use it in specific Component like this一切都很好,我可以在任何地方使用它,但是当我想在这样的特定组件中使用它时
<template>
<div>
<my-plugin></my-plugin>
</div>
</template>
<script>
import MyPlugin from './../myPlugin.js'
export default {
MyPlugin
}
</script>
i get this error in console我在控制台中收到此错误
vue.runtime.esm.js?2b0e:619 [Vue warn]:
Failed to mount component: template or render function not defined.
found in
---> <MyPlugin>
<AppHome> at src/components/Home.vue
<App> at src/App.vue
<Root>
whats my problem guys how i can resolve it?什么是我的问题伙计们我该如何解决? thanks
谢谢
Here is a sample code to register globally components.这是一个注册全局组件的示例代码。
There is something tricky, probably the global component registration before the first Vue instance.有一点很棘手,可能是第一个 Vue 实例之前的全局组件注册。
main.js main.js
import Vue from "vue";
import App from "./App";
import my_plugin from "./my-plugin";
Vue.use(my_plugin);
new Vue({
el: "#app",
render: h => h(App),
});
my-plugin.js我的插件.js
import MyComp from "./MyComp";
export default {
install(VueInstance) {
VueInstance.component("MyComp", MyComp);
}
}
MyComp.vue MyComp.vue
<template>
<div>{{this.message}}
<my-comp v-if="this.index>0" :index="this.index-1" :message="message">
</my-comp>
</div>
</template>
<script>
export default {
name: "MyComp",
props:['index','message'],
components: {},
data: function () {
return {}
}
}
</script>
App.vue: with no import of my-comp App.vue:不导入 my-comp
<template>
<div>
<MyComp index="4" message="static"></MyComp>
<component :is="'my-comp'" index="4" message="dynamic"/>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data: function () {
return {}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.