Vue中如何用$emit传递多个值

这次，$emit我将解释如何将多个值传递给Vue的参数并发送它们。

有两种方法可以做到这一点。

1. 将多个值传递给 $emit 参数并按父级中的原样接收它们

// 子组件
this.$emit('hoge', 数据1, 数据2);
// 父组件
methods: {
  hoge(数据1, 数据2) {
    // 处理
  }
}

$emit执行此操作时，请在第二个参数之后添加数据，并使用父组件的方法按原样接收数据。正如你所看到的那样。

您可以拥有任意数量的参数，但$emit请注意，您发送的数据名称和您从父级接收的参数名称必须相同。

这对我个人来说是最简单的。

2. 将一个对象传递给 $emit 的第二个参数，并通过父级中的拆分赋值来接收它

// 子组件
this.$emit('hoge', {
  数据1,
  数据2,
});
// 父组件
methods: {
  hoge({数据1, 数据2}) {
    // 处理
  }
}

$emit，第二个参数将所有数据作为对象，父组件通过拆分赋值来接收它。两者{}都被正方形包围，但$emit其中一个是对象，父级是分割赋值，所以不要搞错。

同样，对象的键名称和父函数的参数名称必须相同。

3.其他方法

$emit还有一种方法是在父函数中接收使用扩展语法发送来的多个数据。

// 子组件
this.$emit('hoge', 数据1, 数据2);
// 父组件
methods: {
  hoge(...args) {
    // 处理
    console.log(args[0]);
    console.log(args[1]);
  }
}

然而，正如您所看到的，这种表示法纯粹是令人困惑的，不应该使用。我不知道发送的数据的名称，也不知道发送了多少条数据。

出于某种原因，当我用谷歌搜索时，这种方法会出现很多，但args[0]我不推荐它，因为我永远不知道它是什么。

结语

$emit关于 的解释有不少，但是我没有找到太多关于如何传递多个值的内容，所以我写了一篇文章。

我感觉这种详细的信息不容易出来。