在網頁可以很輕松的添加一個類似tip的全局組件,但是在微信小程序,每個頁面都是單獨的,無法使用全局組件,
基于此限制,我寫了一個自動在每個頁面添加組件的webpack插件。愛掏網 - it200.com
實現方法
方法大家應該都能想到,在main.js里使用vue.component()來注冊全局vue組件,然后在每個頁面的vue的文件里面
的template插入全局組件的標簽就好了。愛掏網 - it200.com
源碼位置: uni-optimize
使用方法
chainWebpack: cOnfig=> {
config
.plugin("importPlugin")
.use(importPlugin,[
// 數組里面每一個對象就是一個全局組件
{
// 組件在頁面里的標簽名
name: "ii",
// 組件針對config的地址
src: "./src/com/ii.vue",
// 不包含哪些頁面,沒有就是全部頁面
excludeFun: (filePath) => {
const ignore = ["./src/views/Home.vue"];
return ignore.some((item) => filePath.includes(item));
},
// 標簽的傳參,最后變成
//
// @er="cc"
// />
// 標簽的傳參,如果要接收子組件的emit,最好在子組件通過this.$parent.cc來判斷父組件是否有這個方法以防報錯,
// 父組件的方法需要自己收到加,不支持slot
paramFun: () => {
return [
{
key: "fa",
value: "123",
},
{
key: "@er",
value: "cc",
},
];
},
},
])
}