在Vue.js中从许多子对象向父对象发射对象

Question

我在vue.js应用程序中有一个父级和子级组件。子级在发出调用时将对象传递给父级。有时，孩子必须将一个空的对象传递回父母。

父级具有多个子级组件。当它从一个包含空对象的子级接收到一个发射时，它必须更新其变量“ f”以丢失该特定子级的过滤器内容，但仍包括其他子级的任何内容。我怎样才能做到这一点？这是我的代码，当任何子代将空的newFilt对象传递回父代时，它当前会擦除整个“ f”变量。如果其他子项已将newFilt数据发送回父项，则该数据将不希望出现在父项的“ f”变量中。

子组件：

   saveValues() {
      this.recalc();
      // yields something like { city: [ "Chicago", "Rockford" ] }
      let newFilt = null;
      if (this.selectedValues.length > 0) {
        newFilt = {
          [this.columnDef.column_name]: this.selectedValues
        };
      } else {
        newFilt = {};
      }
      this.$emit("filters-changed", newFilt);
    }

父组件：

methods: {
    onFiltersChanged(newFilter) {
      console.log("in onFiltersChanged... newFilter = " + newFilter);
      this.f = Object.assign(this.f, newFilter);
      console.log(
        "this.f after reassigning new filter: " + JSON.stringify(this.f)
      );
    },

Answer 1

子组件可以发出某种识别符，它将使父组件知道发出的来源：

子组件：

this.$emit("filters-changed", {name: 'name1', newFilt})

父组件：

onFiltersChanged (payload) {
  let { name, newFilt } = payload 
  ...
}

您没有向我们展示足够的代码来举一个更有用的示例，但是您明白了，只要使用name中的onFiltersChanged变量即可完成所需的操作