js函数传参 有默认参数时，不覆盖原有参数并传入新的参数

使用插件时，有时插件会有默认参数，但是业务需求又需要传入新的参数，所以碰到这个问题，目前发现两种解决方法
第一种：

<template>
  <div class="home">
    <el-cascader
      placeholder="请输入 / 选择"
      v-model="areaCode"
      :options="options"
      :props="{ multiple: true, expandTrigger: 'hover' }"
      @change="handleChange(1, $event)" // 默认事件放在最后一位，前面可以加任意位的参数
      collapse-tags
      filterable
    ></el-cascader>
  </div>
</template>
 
<script>
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {},
  methods: {
    handleChange(state, e) {
      console.log(state, e); // 1, ['zhinan', 'shejiyuanze', 'yizhi']
    },
  },
};
</script>
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

第二种：

<template>
  <div class="home">
    <el-cascader
      placeholder="请输入 / 选择"
      v-model="areaCode"
      :options="options"
      :props="{ multiple: true, expandTrigger: 'hover' }"
      @change="
        (event) => {
          handleChange(event, 1);
        }
      " // 增加一个回调函数，先传入事件，再调用要使用的函数后依次传入参数
      collapse-tags
      filterable
    ></el-cascader>
  </div>
</template>
 
<script>
export default {
  name: "",
  data() {
    return {
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {},
  methods: {
    handleChange(state, e) {
      console.log(state, e); // [ "zhinan", "shejiyuanze", "yizhi" ] 1
    },
  },
};
</script>
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

原文