Question

这是一个代码示例。

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只设置为子发出的第一个值（int这个例子，'v1'）

有没有办法做到这一点？我知道我可以发出一个数组来捕获多个值。但是有些库只会发出多重价值。

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

Answer 1

定义一个处理程序，该处理程序接受事件中的多个参数，并将它们传递给除静态参数之外的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)
}

Answer 2

您可以使用解构语法

s = df['URL'].str.split("/", n=4)
df['URL'] = s.str[:4].str.join('/').str.cat(s.str[4].str[:4], '/')
print (df)
                                 URL
0  https://weibo.com/6402575118/Iy0z
1  https://weibo.com/6402575118/Hell
2  https://weibo.com/6402575118/hith

您可以像这样访问这些值

rsplit

Answer 3

我会这样做：

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

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

3 个答案: