vue组件通讯的方法最全总结

4407873a2c8591059cc1bc5cdfa0a61b.png

Vue 3 中的变化

在 Vue 3 中， $listeners 已经被废弃，取而代之的是$ attrs 包含了所有的属性和事件监听器。因此，在 Vue 3 中，你可以直接使用 v-bind="$attrs" 来同时绑定属性和事件监听器。

Vue 3 示例

<!-- ParentComponent.vue -->
<template>
  <ChildComponent id="child-id" @click="handleClick" />
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked!');
    },
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button v-bind="$attrs">
    Click me
  </button>
</template>

在 Vue 3 中， $attrs 包含了所有的属性和事件监听器，因此你只需要使用 v-bind="$ attrs" 即可。
参考1