记录一下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,
}
}
需要在使用页面进行引用