前端杂记6（Ant组件、Vue）

1.ant菜单和路由同步高亮

a-menu的设置：

vue的data：

current: [],
openKeys: ['sub1','sub2','sub3','sub4'],
keyVal:'',

利用中间实例bus达到组件间的通信
在进入其他对应页面路由的时候this.$bus.emit触发事件

this.bus.$on("onSidermenuChangeCurrent", function(keyVal){
      that.keyVal=keyVal;
      that.current[0] = keyVal;
      console.log('当前菜单key：',that.current);
      //that.focus();
    });

2.ant下拉选择框的选择经过确认后才改变

  

  
    {{item}}
  

  

①利用 :value 绑定住表格当前值，用默认初始值参数是会被改变的

②利用$event获取选择值，同时也能达到传参的效果。

2.img的src动态绑定(vue)

①背景图片：

②src:

引用本地图片需要加上require，使用require定义之后，就可以动态使用了。 :src="’…/img/image.jpg’" 会被解析为字符串

3.this.$refs取到的组件实例为undefined

在created中使用 this.$refs时 dom没有加载成功 所以为undefined

1. 写在mounted中 此时dom已经挂载完成
2. ②使用this.$nextTick（function()）：this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法Vue.nextTick一样，不同的是回调的 this 自动绑定到调用它的实例上。

4.HTML识别换行符输出

①CSS中 设置：white-space: pre-line;

②pre标签是可以的，但不推荐

5.【TS】RangeError: Maximum call stack size exceeded

同名错误：

6.npm依赖包版本号的~和^

_{会匹配最近的小版本依赖包，比如}1.2.3会匹配所有1.2.x版本，但是不包括1.3.0

^{会匹配最新的大版本依赖包，比如}1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0

*会安装最新版本的依赖包