ERPbug

发表于 | 分类于 | | 本文总阅读量 次

ERPbug

在修改erp – bug所碰到的问题集锦

父子组件以及非父子组件通信传参

1.父组件传递数据给子组件

父组件写法

1
2
3
4
5
6
7
8
9
<parent>
    <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>

data(){
    return {
        msg: [1,2,3]
    };
}

子组件接收写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
第一种：
props: ['childMsg']
第二种：
props: {
    childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告
}
第三种：
props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}
可以根据自己的需要选择使用哪一种

2.子组件与父组件通信

vue文档中是这么解释的：如果子组件想要改变数据呢？这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的.

子组件写法

1
2
3
4
5
6
7
8
9
<template>
    <div @click="up"></div>
</template>

methods: {
    up() {
        this.$emit('upup','hehe'); //主动(dispatch)触发upup方法，'hehe'为向父组件传递的数据
    }
}

父组件写法

1
2
3
4
5
6
7
8
<div>
    <child @upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
</div>
methods: {
    change(msg) {
        this.msg = msg;
    }
}

3.非父子组件通信

vue文档中是这么解释的：如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信.

所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.

第一种：

1
2
3
4
创建一个公共的js，美其名曰：bus.js作为中间仓库来传值。
//bus.js
import Vue from 'vue'
export default new Vue()

组件A中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
    A组件:
      '$emit' 官网解释:  ---事件触发器
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bus，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
       通过事件中心去发射'Assembly'自己命名的，方法，this.elementValue为传的参数。
        Bus.$emit('Assembly', this.elementValue)
      }
    }
  }
</script>

组件B中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div>
    B组件:  
   通过$on方法来接受该方法以及传的参数
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收参数   并且调用了在a组件中出发的方法
      Bus.$on('Assembly', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>

这就完成了非父子组件的传参

数组、map集合的遍历

element-ui dialog 无法关闭

Vue

变异方法

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

pop() 方法用于删除并返回数组的最后一个元素。

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

sort() 方法用于对数组的元素进行排序。

reverse() 方法用于颠倒数组中元素的顺序。

替换数组

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat() 方法用于连接两个或多个数组。

slice() 方法可从已有的数组中返回选定的元素。

其他

split() 方法用于把一个字符串分割成字符串数组。

VUE截取字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let str = 'abcdef';
// 0
    str = str.slice(0);//返回整个字符串 abcdef
str = str.substring(0);//返回整个字符串 abcdef
str = str.substr(0);//返回整个字符串 abcdef
// 使用一个参数
str = str.slice(2);//截取第二个之后所有的字符 cdef
str = str.substring(2);//截取第二个之后所有的字符 cdef
str = str.substr(2);//截取第二个之后所有的字符 cdef
 
// 使用两个参数
str = str.slice(2,4);//截取第二个到第四个之间的字符 cd
str = str.substring(2,4);//截取第二个到第四个之间的字符 cd
str = str.substr(2,4);//截取从第3个开始往后数4位之间的字符 cdef
 
// 使用两个负数
str = str.slice(1,-3);//截取第二个到第四个之间的字符 bc
str = str.substring(1,-3);//截取第二个到第四个之间的字符 a #负数转换为0
str = str.substr(1,-3);//不能为负数，若强行传递负数，会被当成0处理 ' ' #负数转换为0

vue 数组合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
treeData=[{
  'children': [],
  'key': '',
  'title': '全部',
  'value': '4'
}]
data.page=[
   { 'children': [],
     key': '',
     'title': '全部',
     'value': '4'
    }
   ]
treeData=treeData.concat( data.page)

Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。

1
2
3
4
5
6
7
8
Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

VUE学习笔记：数组的concat()、slice()和splice()

concat()方法：

concat()方法可以简单的将其理解为合并数组。基于当前数组中的所有项创建一个新数组。简单的说，concat()先给当前数组创建一个副本，然后将接收到的参数添加到这个副本（数组）的末尾，最后返回一个新的数组。来看个简单的示例：

1
2
3
4
var arr = [`大漠`,'30','W3cplus'];
console.log(arr); // ["大漠", "30", "W3cplus"]
var arr2 = arr.concat('Blog','2014');
console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]

上面代码演示的concat()方法传递的值不是数组，这些值就会简单添加到结果数组(arr2)的末尾。

除此之外，concat()传递的值还有其他的使用方法：同时传递一个或多个数组，如下所示：

1
2
3
4
var arr = ["大漠","30"];
console.log(arr); // ["大漠", "30"]
var arr2 = arr.concat(1,["blog","w3cplus"],["a","b","c"]);
console.log(arr2); // ["大漠", "30", 1, "blog", "w3cplus", "a", "b", "c"]

另外,concat()还可以传递空值（也就是说没有传递参数），此时它只是复制当前数组，并且返回一个副本。如下所示：

1
2
3
4
var arr = [1,2];
console.log(arr); // [1, 2]
var arr2 = arr.concat();
console.log(arr2); // [1, 2]

从上面几个示例，不难看出：concat()方法是在数组的副本上进行操作并返回新构建的数组，所以并不会影响到原来的数组。

concat() vs. push()

前面说过push()方法可以也可以给数组传参数，同样是在数组的末尾添加一个或多个值（数组）。那么与concat()有什么不同之处呢？别的先不多说，先来看一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
// push()方法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
arr.push('c','d');
console.log(arr); // ["a", "b", "c", "d"]
 
// concat()方法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
arr.concat('c','d');
console.log(arr); // ["a", "b"]
var arr2 = arr.concat('c','d');
console.log(arr2); // ["a", "b", "c", "d"]

Chrome输出的结果告诉我们：push()和concat()方法都可以将传的参数添加到数组的后面，只不过push()是在原数组上操作（改变的是原数组），concat()不会改变原数组，创建原数组的副本，并且把传的参数添加到新数组后面。

如果传的是数组又将是一个什么情形呢？还是看实例吧。

1
2
3
4
5
6
7
8
9
10
11
// push()方法
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
arr.push(['c','d'],[1,2,3]);
console.log(arr); // ["a", "b", Array[2], Array[3]]
 
// concat()
var arr = ['a','b'];
console.log(arr); // ["a", "b"]
var arr2 = arr.concat(['c','d'],[1,2,3]);
console.log(arr2); // ["a", "b", "c", "d", 1, 2, 3]

push()传递的参数是数组时，将整个数组传给原数组末尾，如示例中得到的结果[“a”, “b”, Array[2], Array[3]]，而concat()传递的参数是数组时，将参数中数组的每一个数组项添加到原数组的末尾，如示例中得到的结果[“a”, “b”, “c”, “d”, 1, 2, 3]。

slice()方法:

concat()方法可以在原数组基础上创建一个副本数组，其实slice()方法它也能基于当前数组创建一个新数组，而且对原数组也并不会有任何影响。

slice()接受一个或两个参数，即要返回项的起始和结束位置。当只给slice()传递一个参数时，该方法返回从该参数指定位置开始到当前数组末尾的所有项。如下面示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 测试数组函数，将输出数组的length和第个key:value
var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};
 
var arr = [0,1,2,3,4,5,6];
test(arr); 
var arr2 = arr.slice(3);
test(arr);
test(arr2);

假设将数组arr的每个数组项存放在一个小格子中，并且按数组的索引号从左向右存放。slice()方法执行之后，将会按传递的参数之前的值从格子中移除，如下图所示：

slice()还可以传两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项，如：

1
2
3
4
5
var arr = [0,1,2,3,4,5,6];
test(arr);
var arr2 = arr.slice(2,5);
test(arr);
test(arr2);

el-table 一行显示不下 …显示

:show-overflow-tooltip="true"