如何使用自定义组件
直接新建小程序组件就自动生成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