vue除了子组件抛出的额外参数,父组件如何传递额外参数

以下为一个简单的demo,只为记录一下

很多时候如果我们多个地方使用同一函数时,往往就需要进行判断了,但是组件库返回的函数携带的参数没办法让我们做多余的判断 这时就需要传递多余的参数了

方法一 使用箭头函数

<template>
  <div>
    <el-switch
      v-model="value"
      @change="(e)=>handleChange(e,'多余参数')"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true
    }
  },
  methods: {
    handleChange(value, demo) {
      console.log(value, demo)
    }
  }
}
</script>

<style lang="less" scoped></style>

方法二使用arguments

<template>
  <div>
    <el-switch
      v-model="value"
      @change="handleChange(arguments[0],'多余参数')"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true
    }
  },
  methods: {
    handleChange(value, demo) {
      console.log(value, demo)
    }
  }
}
</script>

<style lang="less" scoped></style>

方法三使用$event

<template>
  <div>
    <el-switch
      v-model="value"
      @change="handleChange($event,'多余参数')"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true
    }
  },
  methods: {
    handleChange(value, demo) {
      console.log(value, demo)
    }
  }
}
</script>

<style lang="less" scoped></style>

显示效果