gpt4 book ai didi

javascript - 在 Vue.js 中,当父级的 v-on 传递另一个参数时,如何从子级向父级发出多个值?

转载 作者:数据小太阳 更新时间:2023-10-29 05:24:51 24 4
gpt4 key购买 nike

这是一个代码示例。

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() 传递的参数(在此示例中为 1234),以及子组件发出的每个值。我尝试使用 $event 来捕获子发出的值,但是 $event 仅设置为子发出的第一个值(在此示例中为“v1”)

有什么办法吗?我知道我可以发出一个数组来捕获多个值。但是一些库只是发出多个值。

这是上面例子的codepen。 https://codepen.io/anon/pen/MmLEqX?editors=1011

最佳答案

定义一个处理程序,它从事件中接受多个参数并将它们传递给除了静态参数之外的更改方法。

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

关于javascript - 在 Vue.js 中,当父级的 v-on 传递另一个参数时,如何从子级向父级发出多个值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44149294/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com