vue.js - 使用 VueJS 将数据从 child 发送到 parent

Question

我正在使用 Django 和 VueJs 开发一个小项目。一切都很好，我只是想知道如何在发出 Axios 请求后将数据从我的组件 (Modal) 发送到另一个组件？这是我的代码:

注意:请阅读我的代码注释以了解我想要做什么。

child :AddContact.vue

methods: {
    post(){
        getAPI.post('api/contact/post/', this.form).then((response) => {
            // here I want to send response data to Contact.vue
        }).catch((error) => {

        })
    }
}

父级:Contact.vue(我想接收数据的地方)

<template>
   <addContactModal></addContactModal>
</template>

<script>
    import addContactModal from "../modals/contact/addContact.vue";
    import { getAPI } from '../../../vue/src/axios-api';

    export default {
        name: 'Contact',
        components: {
            addContactModal: addContactModal
        }
    };
</script>

Answer 1

您可以 emit来自子组件的信号:

getAPI.post('api/contact/post/', this.form).then((response) => {
    this.$emit('loaded', response) // emit your signal
}).catch((error) => {
    // handle error
})

然后将父级的方法绑定(bind)到信号。请注意:

• 信号名称($emit 的第一个参数)和 @ 指令必须匹配(@ 是短的对于 v-on)
• 传递给$emit的第二个参数将成为绑定(bind)函数的第一个参数

<template>
   <addContactModal @loaded="doSomethingWithResp"></addContactModal>
</template>

... 

<script>
    import addContactModal from "../modals/contact/addContact.vue";
    import { getAPI } from '../../../vue/src/axios-api';

    export default {
        name: 'Contact',
        components: {
            addContactModal: addContactModal
        },
        methods: {
            doSomethingWithResp: function (response) {
                console.log(response)
            }
        }
    };
</script>