小程序组件开发遇到一个组件内嵌两个组件，而这两个子组件所使用的数据来自于同一个API，如下图所示。

如果这时候两个子组件各自导入同一个接口就会显得多余。另外的办法是由父组件导入接口数据，再从父组件将接口数据传入子组件，这样只需要导入一次接口文件即可。

在父组件中获取接口数据

通过在父组件中通过wx.request方法得到所需要的接口数据，然后存储在自己定义的对象中，之后再导入子组件，实现代码示例如下

//父组件js
import {
  getTasksData
} from '../../services/home.js'

Component({
  data: {			//创建数组存储接口数据
    tasks: [],
    time: []
  },
  created: function () {
     getTasksData().then(res => {		//接口请求
        console.log(res);
        const tasks = res.data;
        this.setData({
          tasks: tasks
        })
      })
  }
})

<!--父组件wxml-->
<view class="taskList">
  <x-taskCard class="taskCard" tasks="{{tasks}}"></x-taskCard>
  <x-taskTime class="taskTime" time="{{tasks}}"></x-taskTime>
</view>
<!--tasks="{{tasks}}"将定义的tasks数据导入子组件-->

在子组件中接收数据

然后是在子组件的wxml文件中对传入数据进行接收

<!--wx:for="{{tasks}}"实现数据接收-->
<block wx:for="{{tasks}}" wx:key="item">
  <view class="task_item">
	{{item.id}}
  </view>
</block>

这样就能够成功地通过父组件将接口数据传入到子组件之中了。

巴特西

微信小程序将外部数据从父组件中传入到子组件

在父组件中获取接口数据

在子组件中接收数据

最新文章

热门文章