Vue插件在Components中直接導入時不起作用

Question

我創建了一個簡單的 vue 插件

import myComp from "./myComp.vue";
export default {
    install(Vue, options) {
       Vue.component("my-plugin", myComp);
    }
}

並將其導入 main.js

import MyPlugin from './myPlugin.js'
Vue.use(MyPlugin)

一切都很好，我可以在任何地方使用它，但是當我想在這樣的特定組件中使用它時

<template>
  <div>
    <my-plugin></my-plugin>
   </div>
</template>
<script>
import MyPlugin from './../myPlugin.js'
export default {
   MyPlugin
}
</script>

我在控制台中收到此錯誤

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>

什么是我的問題伙計們我該如何解決？ 謝謝

Answer 1

這是一個注冊全局組件的示例代碼。

有一點很棘手，可能是第一個 Vue 實例之前的全局組件注冊。

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),
});

我的插件.js

import MyComp from "./MyComp";

export default {
    install(VueInstance) {
        VueInstance.component("MyComp", MyComp);
    }
}

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：不導入 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>