Vue.js 向父组件发射对象

Question

我无法弄清楚为什么我无法在父组件中侦听子组件的更改。

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

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

我在下面监听变化：

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 我得到了正确的 emit：

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

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

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

当我查看我的控制台时，我完全没有得到任何输出。甚至在该函数中对字符串进行硬编码 returns 什么都没有。

我做错了什么？

Answer 1

我发现了错误，是我的失误

我将事件监听器添加到错误的父组件。

Vue.js 向父组件发射对象

Vue.js emitting object to parent component

javascript

components

emit

vue.js