vue.js - 在 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 或其他东西，然后用一种方法遍历所有内容，而不仅仅是重复代码？

谢谢

标签： vue.jsquasar

Answer 1

发射函数接受一个值作为第二个参数，所以试试这个：

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

然后：

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


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