vue中如何通过函数传参数

在Vue中，我们可以通过自定义事件及$emit方法来实现组件间的传值。相比传统的props和$emit，在某些场景下，使用函数传参可以更加方便快捷。下面是两种函数传参的示例：

示例1：通过匿名函数传递参数

在Vue中，在父组件里定义一个函数，该函数传入参数后将其传递给子组件触发自定义事件。子组件接收到事件后，触发一个匿名函数并将父组件传入的参数带入，然后将匿名函数的返回值传递给父组件。具体代码如下：

父组件：

<template>
  <div>
    <button @click="handleClick">点击</button>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    handleClick() {
      this.msg = '我是来自父组件的消息！'
    },
    handleCustomEvent(callback) {
      this.msg = callback('我是来自子组件的消息！')
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const callback = (msg) => {
        return `父组件对我说：${msg}`
      }
      this.$emit('custom-event', callback)
    }
  }
}
</script>

在上面的代码中，我们在父组件中定义了一个名为handleCustomEvent的方法，该方法可以接收一个回调函数callback作为参数。当子组件触发自定义事件，将callback作为参数传递给handleCustomEvent方法。父组件接收到自定义事件后，将callback函数和参数一起传给匿名函数，并将匿名函数的返回值赋给msg，完成参数传递。

示例2：通过bind方法传递参数

如果要传递多个参数，但又不想使用对象的方式，还可以使用JavaScript中的bind方法。bind方法可以将一个函数绑定到另一个对象，并生成一个新函数。在Vue中，我们可以将新函数作为参数传递给子组件。具体代码如下：

父组件：

<template>
  <div>
    <button @click="handleClick">点击</button>
    <child-component :callback="callback"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    handleClick() {
      this.msg = '我是来自父组件的消息！'
    },
    callback(msg1, msg2) {
      this.msg = `父组件接收到子组件传来的消息：${msg1}，${msg2}`
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  props: {
    callback: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleClick() {
      const msg1 = '我是来自子组件的消息1！'
      const msg2 = '我是来自子组件的消息2！'
      const newCallback = this.callback.bind(this, msg1, msg2)
      this.$emit('custom-event', newCallback)
    }
  }
}
</script>

在上面的代码中，我们将callback函数作为父组件的方法传递给子组件。子组件将msg1和msg2作为参数绑定到callback函数上生成一个新函数，并将新函数作为回调函数传递给父组件。当父组件接收到自定义事件并触发handleCustomEvent方法时，新函数将被执行，msg1和msg2将作为参数传入，完成参数传递。

总的来说，函数传参是Vue中非常常用的技巧之一，不仅能够实现简单的参数传递，还能够便捷地在组件之间传递多个参数。如果遇到需要传参的场景，可以尝试使用函数传参进行处理。