在Vue.js中，当父对象的v-on传递另一个参数时，如何从子对象向父对象发出多个值？

l2osamch 于 2023-04-21 发布在 Vue.js

关注(0)|答案(3)|浏览(128)

这是一个代码示例。

Vue.component('button-counter', {
  template: '<button v-on:click="emit_event">button</button>',
  methods: {
    emit_event: function () {
      this.$emit('change', 'v1', 'v2', 'v3')  // Here I emit multiple value
    }
  },
})
new Vue({
  el: '#parent',
  data: {
    args: ""
  },
  methods: {
    change: function (...args) {
      this.args = args
      console.log(args)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.common.js"></script>
<div id="parent">
  {{ args }} <br />
  <button-counter v-on:change="change(1234, $event)"></button-counter>
</div>

从父组件中，我想通过change（）获取参数pass（在本例中，1234），但也要获取子组件发出的每个值。我尝试使用$event来捕获子组件发出的值，但$event仅设置为子组件发出的第一个值（在本例中为int，'v1'）
有什么方法可以做到这一点吗？我知道我可以发出一个数组来捕获多个值。但有些库只是发出多个值。
这是上面例子的codepen。https://codepen.io/anon/pen/MmLEqX?editors=1011

vue.js

来源：https://stackoverflow.com/questions/44149294/in-vue-js-how-can-i-emit-multiple-value-from-child-to-parent-while-parents-v-o

3条答案

按热度按时间

k97glaaz1#

定义一个处理程序，它接受来自事件的多个参数，并将它们连同静态参数一起传递给change方法。

<button-counter v-on:change="(...args)=>this.change(1234,...args)"></button-counter>

或者

<button-counter v-on:change="(...args)=>this.change([1234,...args])"></button-counter>

然后把你的方法改成

change: function (args) {
  this.args = args
  console.log(args)
}

赞(0）回复(0）举报 2023-04-21

e0uiprwp2#

可以使用解构语法

this.$emit('change', { x:'v1', y:'v2', z: 'v3' })

你可以像这样访问这些值

<button-counter @change="change"></button-counter>

methods: { change({x, y, z}) { .... } }

赞(0）回复(0）举报 2023-04-21

xwbd5t1u3#

我会这样做：

<button-counter v-on:change="change(1, ...arguments)">

赞(0）回复(0）举报 2023-04-21

我来回答

在Vue.js中，当父对象的v-on传递另一个参数时，如何从子对象向父对象发出多个值？

3条答案

相关问题

热门标签

最新问答