javascript - 如何从 vuejs 中的 this.$emit() 接收第二个参数？

Question

我在 MyInput.vue 中有一个自定义输入元素 my-input:

<input :value="value" @input="inputOccurred($event.target.value)">

在我的 inputOccurred 方法中，我发出了 oninputoccurred 自定义事件并传递了值:

inputOccurred: function(value){
     this.$emit('oninputoccurred', value);
}

但是如何接收父组件传来的值呢？第二个参数(值)从哪里来 this.$emit()？

 <my-input @oninputoccurred="printValue(<!-- How do I get the value here -->)"></my-input>

Answer 1

这是一个向组件发送值的基本示例 :in 然后在内部设置组件模型 this.value，然后在 @input 通过发射将当前值发送回父级。

Vue.component('myInput', {
  template: '#input-template',
  props: ['in'],
  data () {
    return {
      value: this.in
    }
  },
  methods: {
    inputOccurred (e) {
      // set the model
      this.value = e.target.value
      this.$emit('on-out', this.value.split("").reverse().join(""))
    }
  }
});

//
var vm = new Vue({
  el: '#app',
  data () {
    return {
      value: 'Sent from parent, reverse by typing a value'
    }
  },
  methods: {
    setValue (value) {
      this.value = value
    }
  }
});

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  <my-input :in="value" @on-out="setValue"></my-input>
  
  {{ value }}
</div>

<template id="input-template">
  <input :value="value" @input="inputOccurred">
</template>