Question

在下面的代码中，单击组件会向父级发出一个信号，父级会修改其内联状态（在某种意义上 - 不是通过处理程序）：

＆＃13;

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
  }
});

＆＃13;

<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>

＆＃13;

是否可以直接在$emit中访问v-on:mysignal="..."提供的参数？

我知道我可以使用主Vue组件中定义的处理程序，但我希望简化代码并避免在methods中使用多个处理程序。

Answer 1

是的，就像这样：

<my-component v-on:mysignal="value => from = value"></my-component>

＆＃13;

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
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="root">
  <my-component v-on:mysignal="value => from = value"></my-component>
  from component: {{ from }}
</div>

＆＃13;

Answer 2

@click="val => $emit('mysignal', val)"

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

甚至

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

是否可以使用内联$ $参数？

2 个答案: