Is it possible to use inline an $emitted parameter?

user_903011 0
Viewed 2900

In the following code, clicking on the component emits a signal to the parent, who modifies its state inline (in the sense - not via a handler):

Vue.component('my-component', {
  template: '<div v-on:click="emitit">click on the component</div>',
  methods: {
    emitit: function() {
      this.$emit('mysignal', 7)
    }
  }
})

new Vue({
  el: "#root",
  data: {
    from: 0
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="root">
  <my-component v-on:mysignal="from=5"></my-component>
  from component: {{ from }}
</div>

Is it possible to access the parameter provided via the $emit directly in v-on:mysignal="..."?

I know that I can use a handler defined in the main Vue component but I would like to simplify my code and avoid to have several handlers in methods.

vue-component vue.js
2 Answers
@click="val => $emit('mysignal', val)"

<div v-on:click="val => $emit('mysignal', val)">click the component</div>'

or even

@click.prevent="e => $emit('mysignal', e.target.value)"
user_109947660
Related