Vue/React：调用函数传递数据的正确方法？

Posted 2023-02-22

【中文标题】Vue/React：调用函数传递数据的正确方法？

【英文标题】：Vue/React: Proper way to call functions to pass down data?

【发布时间】：2019-08-12 10:21:56

【问题描述】：

所以我对在构建 React 或 Vue 应用程序时传递数据的最佳方式感到困惑。

方法 1) 我让子组件调用函数，这些函数通过 API 调用来获取/刷新组件上的数据。

方法 2) 我最近在这些子组件中尽可能地进行了切换，以将这些 API 调用放在父组件中，子组件调用在父组件中调用该 API 的函数，并将新数据作为道具传递. 这些是处理数据的首选方式吗？方法 2 对我来说感觉更干净一些，并非在所有地方都可行，但感觉父母应该负责在可能的情况下刷新数据，但这也使孩子依赖父母，所以我不再确定.

方法一

<template>

      <div>
          <div v-for="(prod,index) in this.products" :key=index><
               prod.name 
          </div>
      </div>
</template>

<script>
        data() 
            return 
                products: []    
            
        ,
        mounted() 
             this.getProducts();
        ,  
        methods: 
            getProducts: function() 
                axios.post('api/########',  
                        this.products: response.data, 
                )

        
</script>

方法 2

<template>
      <div>
          <div v-for="(prod,index) in products" :key=index><
               prod.name 
          </div>
      </div>
</template>

<script>
        props: 
            products: type: Array
          
        methods: 
            getProducts: function() 
                this.$parent.handleGetProducts()
               *** PARENT WOULD HAVE FUNCTION HANDLEGETPRODUCTS TO MAKE THE API CALL AND PASS DOWN AND REFRESH THE PROPS GOING INTO THIS COMPONENTU**
        
</script>

【问题讨论】：

你能展示一些示例代码吗？这将有助于我们更好地回答您的问题。

是的，刚刚……抱歉

【参考方案1】：

当谈到 Vue.js 和 React 都基于的单向数据架构时，应考虑以下准则：

孩子不应该直接访问父组件数据或函数。 父组件有责任将数据作为

props

传递给其子组件 一般来说，API 调用（或副作用）之类的东西应该放在高阶组件（即父级）中。 在某些情况下，如果子组件需要通知父组件刷新数据，则应通过 Vue.js 中的事件和 React 中的回调来完成。不要真正访问父组件方法，除非父组件已将其作为回调属性传递。 当需要跨不同视图的多个组件共享数据时，请考虑使用 Vuex、Redux 或 MobX 等状态容器。再次记住，状态容器应该由高阶组件访问，并在叶或低阶子组件的情况下保持对状态的访问最小化。 另外，Vue.js 提供插件和提供注入机制，用于从指定的子级开始跨组件树共享数据。在 React 世界中，Context API 是等价的。同样，这种方式会产生强耦合，应减少使用频率。

因此，您对方法 2 所做的是牢记上述指导方针的长期解决方案。

【讨论】：

谢谢！你能解释一下：“孩子永远不应该直接访问父组件数据或函数”吗？我的方法 2 是不是违反了这一点，让子组件发出一个事件来触发父组件中的 API 调用以刷新传递下来的道具？

您在方法 2 中的示例没有发出事件，而是直接在父级上触发事件。要从子级发出事件，您可以在子级上执行 this.$emit('event-name', data)，并在父级上接收事件，例如：<child-component @event-name="handleGetProducts()"></child-component> -- You can read more on emitting events in Vue here

Matt 所以直接在父节点上触发事件不是正确的处理方式吗？

Example。正确的。它被认为是直接操纵。这是一种反模式，因为您现在正在将该子组件“耦合”到该特定父组件。如果您将该子组件移动到其他地方以尝试使用它，您还必须移动父组件（否则没有方法让子组件直接操作）......希望这是有道理的......如果您向父，并让父调用该方法（而不是直接从子调用），这样您现在可以将该子移动到您想要的任何位置，并根据需要处理发出的事件。

没问题。这是另一个示例，可以帮助您更清楚地说明这一点：codesandbox.io/s/y0loz41prj

【参考方案2】：

您可以在 React 中以两种方式传递数据。

使用道具 - 当您将数据传递给孩子时 使用回调和状态 - 将数据子项传递给父项时

详情可以在mediumPassing Data Between React Components查看这篇文章