[20210331更新]使用vue编写项目碰到的问题汇总

1、滚动条监听问题

移动端一般数据较多时，会使用分页查询数据，当页面触底时获取下一页数据。一般使用增加滚动条监听判断是否触底。

使用addEventListener增加scroll监听

在mounted中增加scroll监听，在method中定义handleScroll方法。

注意：最后一个参数要设置为true。否则会不好用

mounted() {
  document.addEventListener("scroll", this.handleScroll, true);
},
methods：{
  handleScroll () {//监听滚动条
     var div = document.getElementById('allmsgbox');
     var leftHeight = div.scrollTop + div.clientHeight;
     var diff = leftHeight - div.scrollHeight;
     if (diff > -1 && diff < 1 && this.isMore) {//滚动条在底部
       this.getMore()//获取更多
     }
  },
}

但是在使用过程中发现，当页面跳转时，因为监听仍在会产生报错，需要在销毁时移除监听。

参数要和增加监听时一样，后面参数也为true，否则移除会失败

destroyed() {
  document.removeEventListener("scroll", this.handleScroll, true);
},

直接在div上使用@scroll监听事件

虽然最后使用removeEventListener移除了监听，解决了问题，但是路由跳转回原先界面时，仍会报错。

所以最终选择了在需要滚动的div上绑定了@scroll监听事件

e.srcElement获取到节点对象

<div class="body" v-if="showList && showList.length > 0" ref="meetingBox" @scroll="handleScroll" >
......
</div>
methods：{
  handleScroll () {//监听滚动条触底
    var leftHeight = e.srcElement.scrollTop + e.srcElement.clientHeight;
    var diff = leftHeight - e.srcElement.scrollHeight;
    if (diff > -1 && diff < 1 && this.isMore) {//滚动条在底部
      this.getMore() //获取更多
    } 
  },
}

2、vue 引入jquery 报错$ is not defined

1）首先看看自己有没有install，没有的话执行
npm install jquery
2）第二步在main.js文件中 import一下jquery

当时我以为这里就截止了，运行了时候还是报错，上往上搜都会在配置文件中配置，结果还是不好用最后在main.js文件中加了一行代码就好用了

2、vue v-if控制组件显示隐藏，组件不显示问题

问题描述：

想要实现左侧导航栏根据不同设备类型进行不一样的展示
1、PC端打开以后正常加载左侧导航栏
2、手机端打开以后，使用a-drawer抽屉形式

出现的问题：

当浏览器缩小到手机模式在回到全屏以后，右侧可以正常设置marign-left长度，但是左侧的内容为空。

查询过程：

	1、因为整套路由是采取动态路由，怀疑是否是切换了以后菜单列表是空的？
	结果：打了断点以后发现菜单不为空
	2、有没有可能左侧菜单栏这里没有监听到设备变化？
	结果：加了日志，有设备状态切换
	3、查找代码逻辑，看看是否有逻辑处理问题
	结果：发现设备判断这里使用的v-if，改成v-show

最终结果：将v-if改为v-show以后能正常显示。

PS：其实这么改的话不是很好，因为左侧导航栏并不是频繁的去切换，用v-if性能会更好（因为v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐。）

如果有大佬有更好的方法，希望能告知一下

附上代码如下：

<a-drawer
      v-show="device === 'mobile'"
      :wrapClassName="'drawer-sider ' + navTheme"
      placement="left"
      @close="() => this.collapsed = false"
      :closable="false"
      :visible="collapsed"
      width="240px">
     <side-menu
         mode="inline"
         :menus="menus"
         @menuSelect="menuSelect"
         :theme="navTheme"
         :collapsed="false"
         :collapsible="true"></side-menu>
</a-drawer>
     <side-menu
        v-show="device !== 'mobile'"
        mode="inline"
        :menus="menus"
        @menuSelect="myMenuSelect"
        :theme="navTheme"
        :collapsed="collapsed"
        :collapsible="true"></side-menu>

$emit（）不能触发父组件方法原因

问题描述：
树结构，点击子节点修改父组件中的某一数据，发现点击后父组件不接受.
查询原因：
1、打断点判断是否发送了事件
2、判断是否父组件接受方法有误
结果发现都没有问题，点击其他还有，只有点击子节点不行，经查阅发现$emit的提交是需要严格的父子组件结构，而子节点触发父组件是祖孙结构，需要层级提交。
解决办法: 增加层级提交

@click-result="$emit('click-result', $event)"/>