const {valChange} = this.$listeners; vue2.x转化vue3.x

在Vue 2.x中，`this.$listeners`是一个对象，用于监听组件上注册的所有事件。但在Vue 3.x中，由于引入了更严格的API设计，尤其是 Composition API，处理事件监听的方式有所不同。

在Vue 3.x中，你可以通过以下方式获取并解构`setup`函数中的事件监听器：

import { onMounted } from 'vue';

const app = {
  setup() {
    // 使用onMounted钩子来确保在渲染完成后运行
    onMounted(() => {
      // 使用ref或reactive来存储值变化的监听
      const valRef = ref(null); // 或者 reactive({ val: null });

      // 当组件接收一个名为'valChange'的自定义事件时，更新ref或响应式对象
      function handleValChange(event) {
        valRef.value = event.value;
      }

      return {
        // 返回一个包含监听函数的对象
        ...{ valChange: handleValChange },
      };
    });
  },
};

在这个例子中，`handleValChange`函数会在接收到`valChange`事件时更新对应的值。注意，在Vue 3.x中，通常我们会避免直接操作`this`，而是使用`ref`、`reactive`或`watch`等响应式API。