Vue中使用$listeners传递事件处理函数-Vue.js-PHP中文网

Vue中使用$listeners传递事件处理函数

WBOY

发布： 2023-06-11 15:09:24

原创

2281人浏览过

在vue中常常会有一些组件嵌套的情况，而这些嵌套的组件之间需要进行事件的传递。在vue中，使用了$emit事件来进行组件之间的事件通信。

但是，在某些情况下，我们需要将一个父组件的事件处理函数传递给嵌套的子组件，这时候，使用$emit事件就不太合适了。这时候，可以使用Vue提供的$listeners来进行事件处理函数的传递。

那么，什么是$listeners呢？$listeners是Vue实例对象中一个特殊的属性，它包含了作用在组件上的所有监听器/事件处理函数。

通过$listeners属性，我们可以将父组件中定义的事件处理函数传递给嵌套的子组件中使用：

父组件中定义事件处理函数：

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <child @childClick="$listeners.childClick"></child>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        console.log('parent click')
      }
    }
  }
</script>

登录后复制

子组件中接收父组件传递的事件处理函数：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$emit('childClick')
      }
    }
  }
</script>

登录后复制

通过这种方式，父组件中定义的事件处理函数可以被传递给子组件中使用了。

立即学习“前端免费学习笔记（深入）”；