我正在将我的中型应用程序从Vue2迁移到Vue3。我注意到Vue3的子-父发射机制与Vue2不同，这让我很困惑。
下面是一个基本示例

// App.vue
<script>
import InputWrap from './InputWrap.vue';
export default {
  name: 'App',
  components: {
    InputWrap,
  },
  data() {
    return {
      msg: 'Hello world',
    }
  },
  methods: {
    onChange() {
      console.log('why change?');
    }
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input-wrap v-model="msg" @change="onChange" />
</template>

// InputWrap.vue
<script>
  import MyInput from './MyInput.vue';
  export default {
    name: 'InputWrap',
    components: {
      MyInput,
    },
    props: ['modelValue'],
    methods: {
      onUpdate(v) {
        this.$emit('update:modelValue', v);
      }
    }
  }
</script>

<template>
  <my-input :modelValue="modelValue" @update:modelValue="onUpdate" />
</template>

// MyInput.vue
<script>
export default {
  name: 'MyInput',
  props: {
    modelValue: String,
  },
  methods: {
    onInput(e) {
      this.$emit('update:modelValue', e.target.value);
    }
  }
}
</script>

<template>
<input :value="modelValue" @input="onInput" />
</template>

连接到Vue SFCPlayground。
我很好奇为什么onChange事件处理程序在App.vue中被调用？
看起来change事件是由MyInput.vue中的input元素生成的。但是为什么这个事件会通过所有组件并在App.vue中被捕获，这一点完全不透明。想象一下，一棵树有几十个嵌套的组件，一个根组件在侦听change事件。这完全是一团糟。
Vue2有一个不同的方法，我喜欢它，因为它有一个透明的子-父通信。有可能打开Vue2发射机制在Vue3？