在 vue 中处理多个发射的更好方法

Question

如果我进入一个页面以使用菜单做一些魔术，我有一些事情要做，我有一个解决方案，但它看起来非常静态，而且对于像 vue 或 quasar 这样花哨的现代事物来说代码太多了。

在我需要发出事件的每个组件上，我使用这个例如：

this.$root.$emit('category-one--name')

为了接收发射事件和处理我使用的东西：

this.$root.$on('category-one--name', this.setSelectBox1)
this.$root.$on('category-otherone--name', this.setSelect2)
this.$root.$on('category-more--name', this.setSelectBox3)
this.$root.$on('category-somemore--name', this.setSelect4)
this.$root.$on('category-ansoson--name', this.setSelectBox5)

然后我处理以下内容：

setSelectBox1() {
  this.model = this.categories[1]
},
setSelectBox2() {
  this.model = this.categories[2]
},

有没有更好的方法，例如给发出的事件一个 Id 或其他东西，然后用一个方法遍历所有而不只是重复代码？

谢谢

Answer 1

Emit function 接受一个值作为第二个参数，所以试试这个：

this.$root.$emit('category-change', this.name);

然后：

this.$root.$on('category-change', this.setSelectBox);


setSelectBox(category) {
  // set model here
},

在 vue 中处理多个发射的更好方法

better way to handle multiple emits in vue

vue.js

quasar