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

news2025/1/19 2:23:42

以下为一个简单的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>