小程序组件开发遇到一个组件内嵌两个组件,而这两个子组件所使用的数据来自于同一个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>

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

微信小程序将外部数据从父组件中传入到子组件的更多相关文章

  1. 微信小程序的ajax数据请求wx.request

    微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...

  2. 微信小程序 不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

    微信小程序  不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 友情提示: 大家 ...

  3. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  4. 微信小程序添加外部地图服务数据

    先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...

  5. 微信小程序之用户数据解密(七)

    [未经作者本人同意,请勿以任何形式转载] 经常看到有点的小伙伴在群里问小程序用户数据解密流程,所以打算写一篇关于小程序用户敏感数据解密教程: 加密过程微信服务器完成,解密过程在小程序和自身服务器完成, ...

  6. 微信小程序简单的数据表格及查询功能

    简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具 前端:界面布局样式和js的跳转 后端:依靠SpringBoot的业务逻辑层 项目的码云地址: https://gi ...

  7. 微信小程序引用外部js,引用外部样式,引用公共页面模板

    https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js============= ...

  8. 微信小程序与H5数据传递

    这的场景是 小程序webview 加载 H5应用 需求点: 1. 小程序的登录code 需要与H5应用的sessionId建立绑定关系 2.H5内发起微信小程序支付,支付参数传递到小程序,支付结果传递 ...

  9. 干货,看微信小程序后台用户数据如何演变和递增

    这几天发现附近小程序又多了好几家,其中有普通小程序和门店小程序,把它们做一个对比,门店小程序更多的像一张名片,只有基本的企业名称.地址.营业时间.电话和门店照片,和普通小程序相比显得逊色许多.楼下的水 ...

随机推荐

  1. CSS 文本截断方案

    单行截断 .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 此方法兼容到ie6过.不过只能单行 ...

  2. Python操作系统

    一 为什么要有操作系统 (两本书:现代操作系统.操作系统原理,学好python以后再去研究吧~~) 现代的计算机系统主要是由一个或者多个处理器,主存,硬盘,键盘,鼠标,显示器,打印机,网络接口及其他输 ...

  3. vue基础----修饰符,watch,computed,method实例方法

    1.vue常用的修饰符,number,trim,number--->当作数字,trim-->去掉前后空格 2.methods与计算属性 computed 的相同与区别 <body&g ...

  4. python3.4.3 连接Oracle生成报表并发送邮件

    python很简单,又很实用.当有需求时用起来会更有方向,大可不必从语法.循环等基础看起. 由于工作需要,每天要拉一份报表发给业务的同事,先是用SSIS做了个包部署到服务器上,每天定时拉报表发邮件给同 ...

  5. Hadoop集群搭建(一)~虚拟机的创建

    Hadoop集群的搭建包括,虚拟机系统的安装:安装JDK,Hadoop:克隆虚拟机:伪分布式的搭建:安装zookeeper:Hive:Hbae:Spark等等: 我将分为多篇文章来记录.这篇文章主要写 ...

  6. macOS Catalina 升级软件问题

    最近升级macOS Catalina系统,升级失败时多尝试几次就可以执行成功了,在使用过程中发现以下问题,大家谨慎升级!!! 存在软件启动不兼容,不存在已软件激活失效问题. 有道词典不兼容,启动异常 ...

  7. 如何查看子线程中的GC Alloc

    1)如何查看子线程中的GC Alloc2)Build时,提示安卓NDK异常3)如何获得ParticleSystem产生的三角形数量4)关于图片通道的问题5)GPUSkinning导致模型动画不平滑 M ...

  8. Python可以用中文命名

    Python中文命名 命名规则数字.字母.下划线 环境 python 3.7.3 x64 win10 现象 Python在命名的地方都是可以用中文命名 如: 变量 中文下划线无法被识别 打出中文下划线 ...

  9. Web中间件 - 常见漏洞总结

    *文章来源:https://blog.egsec.cn/archives/472 *本文将主要说明:Web中间件常见漏洞的产生原因以及修复方案 什么是Web中间件? 百度百科是这样解释的:中间件是介于 ...

  10. 回文串的Manacher算法

    Manacher算法较传统算法的优化之处在于它对每个回文中心寻找回文半径的时候并不是都从半径为1开始找的,而是利用前面已经完成的任务,寻找一个初始的开始搜索的半径大小,复杂度是线性的. 参考博客:ht ...