记录一下vue的自定义组件引入方式

记录一下vue的自定义组件引入方式

第一种方式

import HelloWorld from './components/HelloWorld.vue'
import HelloWorld from './components/HelloWorld2.vue'
import HelloWorld from './components/HelloWorld3.vue'

在需要使用该组件引入即可，适用于页面少量的引入

第二种方式

import HelloWorld from './components/HelloWorld.vue'
Vue.component("HelloWorld", HelloWorld)
import HelloWorld from './components/HelloWorld1.vue'
Vue.component("HelloWorld1", HelloWorld1)

在 main.js 文件中直接引入，引入后无须在使用页面进行引用

第三种方式

export { default as HelloWorld} from './HelloWorld.vue'
export { default as HelloWorld1} from './HelloWorld1.vue'
export { default as HelloWorld2} from './HelloWorld2.vue'

在 components 文件中创建index.js文件

export default {
 name: 'App',
 components: {
   HelloWorld，
  HelloWorld1，
  HelloWorld2，
 }
}

需要在使用页面进行引用