v-on to bind dom event in a custom component #2942

Closed
Jinjiang opened this Issue May 24, 2016 · 5 comments

Projects

None yet

2 participants

@Jinjiang
Member

In Vue 2.0 if we need to offer some common dom event features, we have to write each of them in custom components itself.

for example

main.vue:

<template>
  <btn @click="go">Click Me!</btn>
</template>
<script>
  module.exports = {
    components: {
      btn: require('btn.vue')
    }
    methods: {
      go: function (e) {
        // todo: go to a certain url
      }
    }
  }
</script>

btn.vue:

<template>
  <button @click="click" @mouseenter="mouseenter" @mouseleave="mouseleave" ...><slot></slot></button>
</template>
<script>
  module.exports = {
    methods: {
      click: function (e) {this.$emit('click', e)},
      ...
    }
  }
</script>

But I think that's not necessary.

@yyx990803
Collaborator

I think it's better to be consistent than convenient. Listening to both
component and native dom events makes it unpredictable - what if there is a
new dom event introduced in the future? What if a library is dispatching
custom dom events? What if you happen to use a custom event name that is
also a native dom event? It's just too confusing to listen to both at the
same time and can lead to very hard to debug bugs.
On Mon, May 23, 2016 at 11:44 PM 勾三股四 notifications@github.com wrote:

In Vue 2.0 if we need to offer some common dom event features, we have to
write each of them in custom components itself.

for example

main.vue:

Click Me! <script> module.exports = { components: { btn: require('btn.vue') } methods: { go: function (e) { // todo: go to a certain url } } }</script>

btn.vue:

<script> module.exports = { methods: { click: function (e) {this.$emit('click', e)}, ... } }</script>

But I think that's not necessary.


You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#2942

@yyx990803 yyx990803 closed this May 24, 2016
@Jinjiang
Member
Jinjiang commented May 24, 2016 edited

Well in another way, I think v-on in most html elements mean native dom event so that's also confused me sometimes (such as why <div @click> works but <foo @click> not). How about preserve v-on in custom component just listen to native dom events and we can have another syntax to listen custom event declaratively instead?

@yyx990803
Collaborator

Hmm, maybe add a modifier:

<foo @click.native="hello">
@Jinjiang
Member

I prefer <foo @internal.custom="xxx" @click="yyy">, just personal favor 😜. The native and custom event case is 60%-40% for me.

@yyx990803
Collaborator

Custom events is the recommended way for custom components to produce side effect in the parent, especially now that two-way props are deprecated. It will be much more commonly used in 2.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment