初学vue之踩坑集合

最新推荐文章于 2023-10-16 14:40:43 发布

薛渣渣

最新推荐文章于 2023-10-16 14:40:43 发布

阅读量585

点赞数 2

本文链接：https://blog.csdn.net/qq_40245411/article/details/89531815

版权

最近公司前端开发缺人，于是我这个写后台的就被迫调到前端应急了

第一次接触vue，把我这几天的踩坑之路分享给大家，写的不好请多多担待。

首先可以分享给大家两个常用的VUE UI框架

iview:https://www.iviewui.com/

elementUI:https://element.eleme.io/#/zh-CN

两个框架具体区别请参考：https://www.jianshu.com/p/5cee11d69b70

首先就从最简单的input输入框开始说起吧：

这种就是我们平常使用的input输入框代码：<input name="name" type="text" v-model="brandCreater" @click="creater">

这种就是带icon的input框代码：<Input v-model="sub" @on-click="pingshen" icon="ios-more" type="text" style="width: 200px" />

主要从他们的触发事件来看，平常我们写点击事件都是@click，但是在带icon的input输入框中，会发现@click失效了，需要改为@on-click才可以正常触发点击事件，而且仔细发现他们的写法也不一样一个是input，一个是Input。

第二坑：从调用js里面的方法来说：

当我们新建一个js文件，需要去调用这个js里面的方法，我个人推荐是在main.js里面进行配置

通过 import transition from './assets/js/html2js.js'

Vue.prototype.utils = utils

然后在页面就可以通过this.util.方法名去调用你写的js方法了。

第三坑：获取时间组件DatePicker中的值

我们通过v-model获取的值是中国标准时间，显然不是很符合我们的需要，我们可以通过

var d = new Date(this.brandDate)

var datetime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();

这种方法可以直接在前端进行转换。

第四坑：获取弹框组件中传递的值

当前页面：


<div class="listWillSub2">
          <label for="sub">&nbsp;&nbsp;&nbsp;评审:</label>
          <Input  v-model="sub" @on-click="pingshen" icon="ios-more" type="text" readonly style="width: 200px" /> 
 </div>  
<Modal
        v-model="modal3"
        title="选择评审专家"
        :styles="{top: '20px',width:'700px'}"
        @on-ok="ok3"
        @on-cancel="cancel2">
          <selectWillSub ref="selectWillSub" v-on:listenTochildEvents="showMsgFromChilds"></selectWillSub>
</Modal>

弹框页面：

<template>

<div>

<Table border ref="selection" :columns="historyColumns" :data="historyData" @on-selection-change="handleSelectRow()"></Table>

</div>

</template>
<script>
    export default {
        data () {
            return {
                historyColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '专家工号',
                        key: 'expertCode'
                    },
                    {
                        title: '专家姓名',
                        key: 'expertName'
                    }
                    // {
                    //     title: '评审状态',
                    //     key: 'reviewStatus'
                    // }
                ],
                historyData: [
                    
                ]
            }
        },
}
<script>

我们要将弹框里面选中的值传递到当前页面

handleSelectRow(selection, index) {

this.$emit("listenTochildEvents",this.$refs.selection.getSelection());//this.$refs.selection.getSelection()指的是我们选中的值

}

可以看到我们通过在table上绑定的@on-selection-change这个时间，通过这个函数$emit这个函数定义了一个listenTochildEvents

然后目光转到当前页面，可以看到当前页面定义了v-on:listenTochildEvents="showMsgFromChilds"这样的方法

然后通过这个方法

showMsgFromChilds(data){

this.testDesignsMains = data;

console.log(data)

}

data就是我们拿到的值了

第五坑：就是我们的分页了

这个可以参考：https://www.cnblogs.com/lxl0419/p/9875356.html

这个写的很不错。

第六坑：两个页面之间方法互相调用

引入import selectComponent from '../component/selectComponent'页面

通过<selectComponent ref="selectComponent" v-on:listenTochildEvent="showMsgFromChild"></selectComponent>

中的ref属性

在方法中通过this.$refs.selectWillSub.twoTheme();就可以调到我们selectComponent这个页面的twoTheme方法了

第七坑：vue+iview使用时，render函数创建组件点击事件无效的解决方法

在有些时候，写死的组件无法满足需求，render函数是比较好的选择。但是我在使用render函数时，把页面的东西渲染之后，添加点击事件时遇到一个问题，在render函数里面以on:{ click: () => { console.log('点击事件') } }添加点击事件时，无论怎么样都监听不到，也就是点击render渲染出来的组件或dom时根本没没有作用，但也没报任何错误（我巴不得他这时候能报点错误）。自己在网上找各种资料尝试了使用click,onClick,'on-click'等事件，都没有任何用。

这里的解决方法：将on: {click: () => { console.log('点击事件') }}的on替换为nativeOn。也就是 nativeOn: {click: () => { console.log('点击事件') }}。

nativeOn: 用于监听组件，监听原生事件，而不是用于组件内部vm.$emit触发的事件。

因为我所用的是iview组件库，render所创建的同样是组件，于是这里使用on是没用的，组件和dom的区别。此坑谨记。
参考链接：https://www.jianshu.com/p/034afd50ac21
第七坑：使用splice批量删除数组时，由于数组长度变化，无法删除

splice():该方法会改变原始数组。

var arr=[1,2,3];
for(var i=0;i<arr.length;i++){
console.log(i+'='+arr[i]);
if(arr[i]==2){
arr.splice(i,1);
}
}
//0=1,1=2,

由结果可以看出，这个循环只循环了两次，没有判断当arr[i]=3的情况，这是因为当 arr[2]==2的时候使用splice将该元素删除后，该数组的长度变成了2，此时进行循环已经不满足条件，所以当arr[i]=3的时候没有再进行循环。

解决方法：

var arr=[1,2,3];
for(var i=arr.length-1;i>=0;i--){
console.log(i+'='+arr[i]);
if(arr[i]==2){
arr.splice(i,1);
}
}
原文：https://blog.csdn.net/weixin_38098192/article/details/86153231

第八坑：modal弹出框加form表单验证冲突及确定和取消时间

参考链接：https://www.cnblogs.com/wangdashi/p/9453097.html

第九坑：v-for循环给自身属性添加循环值

参考链接：https://www.jb51.net/article/149126.htm

第十坑：JS合并数组对象中重复数据

参考链接：https://blog.csdn.net/qq_36242361/article/details/83655364

第十一坑：iview组件事件额外传递参数

PS:<Cascader :data="theme" v-if="testStatus" trigger="hover" @on-change="(value,selectedData) => {handlerChange(value,selectedData,index)}"></Cascader>

参考链接：https://segmentfault.com/a/1190000018661374

第十二：iView Cascader、Tree 数据处理

参考链接：https://www.jianshu.com/p/1daf7d762502

补充：

watch监听：

参考链接：https://www.cnblogs.com/shiningly/p/9471067.html

//页面刷新时自动加载此函数

mounted:function(){

//this.oneTheme();

引入页面不仅要通过import，同时还要在components中进行配置。

components: {

listYear,

upLoad,

selectComponent,

selectWillSub

中间可能会写的不是很详细，如果有哪些不清楚的，可以互相交流。

踩坑之旅即将结束，如果有什么写的不对的，请大佬及时请教。

由于第一次使用vue，可能有什么理解不对的地方，请多多担待，感谢。

最后，再分享大佬总结的vue插件集合：https://blog.csdn.net/hjh15827475896/article/details/78207066

薛渣渣

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学vue之踩坑集合

最近公司前端开发缺人，于是我这个写后台的就被迫调到前端应急了第一次接触vue，把我这几天的踩坑之路分享给大家，写的不好请多多担待。首先可以分享给大家两个常用的VUE UI框架iview:https://www.iviewui.com/elementUI:https://element.eleme.io/#/zh-CN两个框架具体区别请参考：https://www.ji...
复制链接

扫一扫