关于javascript：Vue.js将对象发射到父组件

Vue.js emitting object to parent component

我在弄清楚为什么我不能从父组件的子组件中侦听更改时遇到了麻烦。

我有一个自定义的<v-address></v-address>组件，其中包含几个输入字段，供用户输入如下地址：

1
2
3
4
5
6

<v-text-field
v-model="address.address_line_1"
label="Street Address"
required
@change="inputChanged">
</v-text-field>

下面，我听听变化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { mapGetters, mapActions } from 'vuex';
export default {
data() {
return {
address: {
address_line_1: '',
address_line_2: '',
city: '',
province: '',
postal_code: ''
}
}
},
computed: {
...mapGetters([
'getProvinces',
]),
},
methods: {
inputChanged() {
this.$emit('address:change', this.address);
}
}
}

每次更改输入字段时，我都希望将整个地址对象发送到父组件。

当我在inputChanged()方法中使用console.log(this.address)时，我将获得具有所有可用值的正确对象。

我现在想像这样发出对象：
this。$ emit('address：change'，this.address);

使用vue devtools我得到正确的提示：
enter

在我的父组件中，我监听<v-address @address:change="changeAddress"></v-address>组件中的更改。

然后在父组件中尝试输出这些更改：

1
2
3
4
5
6
7
8

methods: {
...mapActions([
'setE6',
]),
changeAddress(value, event) {
console.log(value);
}
}

当我查看控制台时，绝对没有任何输出。即使在该函数中对字符串进行硬编码也不会返回任何内容。

我在做什么错？