Question

在使用像React和Vue这样的框架时，我正在努力寻找一种体面的方式来处理向下传递数据的方式。对于我正在从事的Vue项目，我一直在使用这种方法，并希望确保它有意义。

现在，我让我的父母进行“ Master” API调用，以获取整个Customer对象。我将Customer作为道具传递给子组件。子组件使用Customer.address的值来预填充输入字段。如果该字段已更新，则子级将进行api调用以发布新数据，然后我将一个函数返回给父级，以调用“ Master”函数并获取Customer对象的新副本，以便其传递的道具下来被刷新。这有道理吗？

Parent.vue

<template>

    <Child 
        :customer = "this.customer"
        @handleGetCustomerData = "getCustomerData"
        >

    </Child>

</template>


<script>

    export default {

        data() {
            customer = {}
        }
        mounted() {
            this.getCustomerData()
        },
        methods: {

            getCustomerData: function() {
                axios
                    .get('/api/customer')
                    .then(response => {
                        this.customer = response
                    };
            }
        }
    }

</script>

Child.vue

<template>

    <div>
      <input :value="customer.address" ref="address">
        <button
            v-on:click="updateAddress()">
            Update Address
        </button>

    </div>

</template>

<script>
    export default {

        props: {
            customer:  {type: Object}
        },

        methods: {

            updateAddress() {
                axios.post('/api/address', { 
                address: this.$refs.address.value
            })
            .then(response => {
                this.handleGetCustomerData()
            });

            handleGetCustomerData() {
                this.$emit('handleGetCustomerData')
            }

        }
    }

</script>

Answer 1

这当然是有道理的。我们使用道具交流parent -> child，并使用事件交流child -> parent。

您做得正确，但是在子组件内部调用API时可能会遇到一些问题和复杂的调试。我只是$emit一些“ updateAddress”传递this.$refs.address.value作为参数并在父组件内部调用API。

这样做，您可以集中API调用和刷新，并始终通过道具更新孩子的数据。

希望有帮助！ Here is a great article about it。

Answer 2

我不了解Vue，但在React中，我不让孩子完全处理API请求。逻辑应该放在一个位置（父级），然后流程看起来像这样：

（父母）获取对象并作为道具通过
（子级）更新字段时，子级会从父级运行回调
（父母）执行api请求，然后获取更新的对象并更新道具

向家长发送功能以刷新道具？

2 个答案: