[Vue compat] @click not working on a component

[SupertigerDev]

Version

3.2.11

Reproduction link

codesandbox.io

Steps to reproduce

Clicking on "click mee"

What is expected?

Should log "click" in the console

What is actually happening?

Not doing anything

---

I tried adding COMPILER_V_ON_NATIVE: false to vue.config.js but it seems to make no difference. This issue only happens in the compat build of vue

[Justineo]

You need to use the .native modifier.

[SupertigerDev]

Oh, but in the documents, it says to remove all .natives? confused
https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.html#_2-x-syntax
I also get this huge error in my real project to actually remove .native.

[SupertigerDev]

Also even with the .native modifier, it still doesnt work with the compat build of vue 3.

https://codesandbox.io/s/sharp-proskuriakova-woc9s?file=/src/App.vue

[Justineo]

Are you using the migration build? The compiler flag you mentioned can only work with the migration build. See https://v3.vuejs.org/guide/migration/migration-build.html#migration-build

[SupertigerDev]

Yes, as my title says, im using the vue 3 compat build which is the migration build.

[SupertigerDev]

Could you reopen the issue please as this seems like a bug. I've been stuck with this issue all day :(

[LinusBorg]

So I've been looking into this, and it doesn't really qualify as a bug. Rather, it's a complicated interaction between multiple breaking changes and their corresponding COMPAT flags/behaviors. This might need a special entry in the migration docs.

Short summary

• in Vue 2, the parent is responsible for applying native root node listeners, in Vue 3, it's the child.
• When COMPILER_V_ON_NATIVE is enabled and the parent used .native, we do emulate this by passing a flag along the event to the child component which can then properly handle the "native" event.
• When COMPILER_V_ON_NATIVE is disabled and the parent doesn't use .native anymore, we pass the event like a normal component event listener to the child (no additional flag).
• The child, running in Vue 2 compat mode, does treat all incoming listeners as component event listeners and doesn't add anything to the root node.

Solution

In the child component, the following compatConfig has to be set:

export default {
  compatConfig: {
    INSTANCE_LISTENERS: false,
  }
}

This has the following effects:

1. The component instance no longer provides this.$listeners (Vue 2 API, not present in Vue 3)
2. All incoming event listeners that are not declared in the component's emits: [] option are added as native listeners to the template root element. (new Vue 3 behavior)

If the child is already fully migrated and can run in Vue 3 mode, the problem would also be solved:

export default {
  compatConfig: {
    MODE: 3,
  }
}

Concerning Migration documentation

So this is one of the most complex migration steps in fact, as it involves a change in behavior in the parent and child interaction.

• In Vue 2, the parent was responsible to take care of native listeners marked with .native.
• In Vue 3, the child does take care of them by treating all non-declared events as native.
• This touches on multiple changes:
  • .native removal
  • $listeners removal and non-declared events now being part of $attrs
  • Requirement to explicitly declare a component's emitted events with emits

So what would be a good migration strategy that we can document? I think this would be good

1. Keep .native in templates until the children are ready to handle native events in the Vue 3 way
2. First, migrate any children that use $listeners to use $attrs instead (usually used in combination with inheritAttrs: false)
3. document emitted events in child components with emits: []
4. In each of these child components, disable INSTANCE_LISTENERS compat behavior
5. Now remove all usage of .native

/cc @vuejs/docs

[cyfung1031]

Is it just the problem in codesandbox.io?
It performs correctly in SFC Playground

[cyfung1031]

Oh, but in the documents, it says to remove all .natives? confused
https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.html#_2-x-syntax
I also get this huge error in my real project to actually remove .native.

I learn vue3 directly I don't even know this .native
I don't think you have to add it.
@click="someFunc" is commonly used in vue3
and this is exactly the offical example for event handling.

https://v3.vuejs.org/guide/events.html

[cyfung1031]

You need to use the .native modifier.

He is using vue3 not vue2.

[SupertigerDev]

I fixed my issue by adding INSTANCE_LISTENERS: false as suggested 😀

[cyfung1031]

I fixed my issue by adding INSTANCE_LISTENERS: false as suggested

I recommend you to use vite2 to build your vue3 apps. Vite2 don't need to config these options and everything works the same way as official docs.

https://v3.vuejs.org/guide/installation.html#vite