在Vue.js中将对象从多个子对象发射到父对象

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

父组件有多个子组件。当它从包含空对象的其中一个子对象接收到发射时，它必须更新其变量“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)
      );
    },

父组件：

   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)
      );
    },

---

子组件可以发射某种标识符，该标识符将让父组件知道发射来自何处：

子组件：

   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)
      );
    },

this.$emit（“过滤器已更改”，{name:'name1'，newFilt}）

父组件：

   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)
      );
    },

onFiltersChanged（有效负载）{
设{name，newFilt}=payload
...
}

---

您没有向我们展示足够的代码来制作一个更有用的示例，但是您明白了，只需使用

onFiltersChanged

中的

name

变量来查找/过滤对象

您能在jsfiddle或codepen上创建一个示例吗？