vue 项目问题总结

替换数据中指定key 值

例如将cityJson中"rid"=>"label","name"=>"value", "child"=>"children",
let cityJson = [{
"rid": "11",
"name": "北京",
"child": [{
"rid": "1101",
"name": "北京",
"child": [{
"rid": "110101",
"name": "东城区"}]
}]
}]

方法一：直接使用 eval() 方法，前端编译工具报错
let city = JSON.stringify(cityJson)
.replace(/"rid"/g, "value")
.replace(/"name"/g, "label")
.replace(/"child"/g, "children");
this.cityData = this.eval(city);
解决：eval(fn) {
let Fn = Function; // 一个变量指向Function，防止有些前端编译工具报错
return new Fn(fn)();
}
方法一：map嵌套循环
this.cityData = cityJson.map((item) => {
return {
value: item.rid,
label: item.name,
children: item.child.map((ite) => {
return {
value: ite.rid,
label: ite.name,
children: Array.isArray(ite.child)
? ite.child.map((it) => {
return {
value: it.rid,
label: it.name,
};
})
: "",
};
}),
};
});

vue keepAlive不生效

在App.vue页面写keepAlive没有效果，然后又试了下include也是没有效果。
原因是项目中有多个router-view，把keepAlive写在最里面的router-view外就可以了
一、利用meta标签
1、首先在路由中的meta标签中记录keepAlive的属性为true
2、在需要缓存的router-view组件上包裹keep-alive组件　　
<keep-alive> <router-view v-if='$route.meta.keepAlive'></router-view> </keep-alive>
<router-view v-if='!$route.meta.keepAlive'></router-view>
3、有些情况下需要缓存有些情况下不需要缓存，可以在缓存的组件里的路由钩子函数中做判断　　
beforeRouteLeave (to, from, next) {
this.loading = true
if (to.path === '/goods_detail') {
from.meta.keepAlive = true
} else {
from.meta.keepAlive = false
// this.$destroy()
}
next()
},

使用include、exclude属性和beforeRouteEnter钩子函数

要在组件里面 写对应的 name: "home", 首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

使用Swiper插件遇到的滑动冲突问题，手机端浏览不能滑动页面

new Swiper('.swiper', {
autoplay: true,//可选选项，自动滑动
loop : true,
direction : 'vertical',
})

vue 自定义事件传参 $event

<div
                      style="height:110px"
                    >
                      <UploadImg
                        :fileList="td.fileList"
                        @getImageUrl="getUploadFile($event,td)"
                        :limit="9"
                      />
                    </div>
    getUploadFile(files,td){
       td.fileList=files
    },
在原生dom事件里就是事件对象，自定义事件组件，第一个参数就是 $emit 
1.不使用圆括号，event被自动当作实参传入
2.使用圆括号，必须显式的传入event对象，如果不传入可能最终找到的是全局的window.event = undefined