Question

我有一个简单的应用程序捕获输入中的任何内容，并将其打印在h1。

<div id="app">  
  <div>
    <module v-on:button-pressed="parentPrint(capturedInput)"></module>
  </div>
  <h1>{{ h1Text }}</h1>
</div>

问题是，h1不会更新以反映输入值。

Vue.component('module', {
  template:`
    <div>
      <input type="text" placeholder="Type Something Awesome" v-model="capturedInput" />
      <button v-on:click="activateButtonPress">Change text</button>
    </div>
  `,
  data(){
    return {
      capturedInput: ''
    }
  },
  methods:{
    activateButtonPress: function(){
      console.log(this.capturedInput)
      this.$emit('button-pressed', this.capturedInput)
    }
  }
})

new Vue({
  el:'#app',
  data:{
    h1Text: 'Should reflect user input'
  },
  methods:{
    parentPrint: function(capturedInput){
      this.h1Text = capturedInput;

    }
  } 
})

如何实际将数据传递到emit并使其在父作用域中可用？ capturedInput为我继续undefined。

Answer 1

在父级中定义事件处理程序时，不需要像现在这样添加参数。你从孩子身上发出的任何/所有参数都将被发送给父母。

所以改变

<module v-on:button-pressed="parentPrint(capturedInput)"></module>

到

<module v-on:button-pressed="parentPrint"></module>

如果您只从您的孩子那里传递1个参数，就像您现在在this.$emit('button-pressed', this.capturedInput)中一样，只需在您正在调用的父方法中添加一个参数即可。如果你传递了来自孩子的2个参数，例如this.$emit('button-pressed', this.capturedInput, '2nd')，你可以在父方法定义中添加另一个参数来捕获它。

编辑：此工作的代码：https://codepen.io/anon/pen/rGmXbx

将参数传递给$ emit返回undefined

1 个答案: