在 Vue.js 中从多个子级向父级发射一个对象答案

【问题标题】：Emitting an object from many children to a parent in Vue.js在 Vue.js 中从多个子级向父级发射一个对象
【发布时间】：2020-03-13 19:50:00
【问题描述】：

我在一个 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)
      );
    },

【问题讨论】：

你能在 jsfiddle 或 codepen 上创建一个例子吗？

标签： vue.js null parent children emit

【解决方案1】：

子组件可以发出某种标识符，让父组件知道发出来自哪里：

子组件：

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

父组件：

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

您没有向我们展示足够的代码来制作更有用的示例，但您明白了，只需使用 onFiltersChanged 中的 name 变量来查找/过滤对象

【讨论】：