1. 组件封装成插件
// components/index.js
// 把components中所有的组件都进行全局注册
// 提供插件方式
import ImageView from './ImageView/index.vue'
import Sku from './XtxSku/index.vue'
export const componentPligin = {
install(app){
// app.component('组件名字',组件配置对象)
app.component('XtxImageView',ImageView)
app.component('XtxSku',Sku)
}
}
2. 引用注册
// main.js
// 引用且注册
import {componentPligin} from "@/components/index"
app.use(componentPligin)
3. 使用组件
<!-- .vue-->
<!-- 使用全局组件,无需引用-->
<XtxImageView :image-list="goods.mainPictures"></XtxImageView>
<XtxSku :goods="goods" @change="skuChange"></XtxSku>