首页 > 其他 > 详细

组件通信

时间:2021-03-27 12:17:12      阅读:23      评论:0      收藏:0      [点我收藏+]

如何使用自定义组件

直接新建小程序组件就自动生成json,js,acss,axml(记得开components2编译)
组件json文件
{
  "component": true,//一定要true
  "usingComponents": {//需要的依赖
    "tag": "mini-ali-ui/es/tag/index"
  }
}
父组件(或页面)json文件
{
  "defaultTitle": "我的商机",
  "usingComponents": {
    "tag-history": "/components/taghistory/taghistory"//注册组件
  },
  "pullRefresh": true
}
父级或页面.axml文件使用组件
<
tag-history />
子组件.axml文件
<
view> <view> wo tai nan le </view> </view>

父组件(或页面)向子组件传值

父级或页面.axml文件

<tag-history a="{{b}}"/>//这里b是父级或页面的data数据,a是自定义属性

子级.axml文件
<view>{{a}}<view/>

父组件向子组件传递方法(不太懂,但只能感受它)

父级(或页面).axml文件
<tag-history onItemTap="c"/>//这里c是父(页面)的函数方法,onItemTap是自定义属性,必须有个on,不然会报错,这里真的好坑

子组件.axml文件
<view  onTap="onItemTap">//点击事件绑定为父级(页面)自定义的属性

子级.js文件
methods: {
    onItemTap(e) {
      console.log(e)//拿到点击时参数
      const { onItemTap } = this.props;//这步不太理解,但很重要,给函数一个存储地址?
      // console.log(onItemTap)发现打印了整个函数出来
      var name = e.currentTarget.dataset.keyword;
      console.log(name)
      if (onItemTap) {
        onItemTap(name);带参数
      }
    }
  }

父级(页面).js文件
c(name){//定义方法,这里name是子组件传过来的参数

}

 

 

 

组件通信

原文:https://www.cnblogs.com/black-eyes/p/14584928.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!