Javascript 如何在Vue中同时绑定和发送数据？

我正在将Laravel框架与Vue一起使用。我有一个父组件，它有一个子组件。子组件有一个复选框列表，无论我勾选哪个复选框，该值都会从存储在data（）中的数组中追加（或删除）。我能够将输入正确绑定到子组件中的数组，但当我将此数组发送回父组件时，数据并不新鲜，即它将返回一个数组，其中包含我勾选的上一个复选框的结果，而不是当前复选框的结果。 我想知道如何在数据绑定和数据发送之间引入一种延迟，以便能够发送回准确的数据

子组件

<input type="checkbox" :id="color" :value="color" v-model="colors" @click="$emit('color', colors)" />

data() {
    return {
        colors: []
    }
},

数据（）{
返回{
颜色：[]
}
},

父组件

<Child v-on:color="updateColors" />

data() {
    return {
        colorList: []
    }
}
updateColors(colors) {
    this.colorList = colors;
}

数据（）{
返回{
颜色列表：[]
}
}
更新颜色（颜色）{
this.colorList=颜色；
}

输出：当我第一次点击红色时，发射回来的数组是空的，当我再点击另一种颜色如蓝色时，发射回来的数组只有“红色”

是否有人可以帮助我绑定数据并同时发送相同的数据，或者如果不可能，则引入延迟，帮助我首先将数据保存到阵列中，然后将修改后的阵列发送回父组件？

您可以在Vue中设置数据属性，并在更改时执行功能。例如，在子组件中，您可以查看属性

colors

，并仅在

colors

发生更改时发出

color

事件

watch: {
  colors: function(){
    this.$emit('color', this.colors);
  }
}

---

一种选择是更改发出数据的事件。 当前，当

单击时发射。但是，正如你提到的，在数据更新之前。要解决问题，只需将事件更改为
@change

在任何情况下，我建议您使用存储来保持组件之间的数据同步。
例如，你可以看看，或者建立自己的商店。新集成的Vue是构建您自己的存储的一个方便功能。从Vue 2.6中可以观察到，请参见
使用
@valuechanged
应该可以工作。我尝试使用@valuechanged，但现在返回的数组总是空白的哦，我错过了您使用组件数据发出的结果。但我不知道为什么它总是空的。A真的很有帮助，谢谢，下次我会尝试通过引用那个链接来澄清我的问题。这很有效。因此，我们只是在观察数组内容的变化之后才发射，而不是在观察输入之后。非常感谢。我尝试了
@change
但问题仍然存在，这就是我必须解决
watch
属性的原因。