网上太多写法都是错的,本人亲测后,如下写法有效,依然需要一个install的函数:
组件:
<template> <div> 我是组件 </div> </template> <script> export default { } </script> <style scoped> div{ font-size:40px; color:#fbb; text-align:center; } </style>
注册JS:
import component1 from './myComp.vue' import Vue from 'vue' let componentss={}; componentss.install =()=>{ Vue.component('component-name',component1) } // 导出该组件 export default componentss
使用:
import loading from '../components/register'
Vue.use(loading)
<template>
<div>
<component-name></component-name>
</div>
</template>
参考了vue的官方install说明和vant组件库的toast源码,其实就是包装了一下已有的组件,它里面可以一次封装多个组件,让你不用一直注册在component里面了,
比如你又要一个组件,就在register里面这么添加:
componentss.install =()=>{ Vue.component('component-name',component1) Vue.component('component-name2',component2) }
然后用就直接写就行了:
<template> <div> <!-- <van-button type="default">默认按钮</van-button> <div id="myChart" style=" 600px;height:400px;"></div> --> <!-- <cdn-test></cdn-test> --> <component-name></component-name> <component-name2></component-name2> <!-- <myCompPlugin></myCompPlugin> --> </div> </template>