小程序组件化开发

经过三天的不懈努力,学会了一种新的小程序组件方法,类似于vue的组件化开发,学会了之后vue和小程序的组件化开发就都学会啦,这个不同于小程序的tem…组件化开发,那个组件化开发不能写js用起来感觉是没有这个方法方便的
废话不说,直接上图,
在这里插入图片描述
首先创建一个跟page同级的文件夹,里面放置组件,这里叫做子组件,这里的名字是自定义的,orderlist对应父组件里面的属性名,一个属性名传一个值,然后在子组件的pro…里面注册列表,一个列表项代表一个接收属性
在这里插入图片描述
子组件里面的json的这个值要设置为true代表这是一个组件
在这里插入图片描述
在这里插入图片描述
接下来看引用子组件的地方的写法,这里叫做父组件
在这里插入图片描述
这里的标签名是祖册的组件名,属性是要传给子组件的属性名,后面是属性值,子组件里面注册过列表之后可以直接使用这个属性名就可以获取传过来的值,当做普通的wxml处理,js里面也可以直接使用这个属性名当做普通的变量名处理,
在这里插入图片描述
上图是注册组件,前面是组件名,后面是组件路径,
在这里插入图片描述
这里是我在父组件的data里面的变量,也是传给子组件的变量的值
在这里插入图片描述
这里是效果,没有写样式比较丑陋,根据子组件的js和wxml可以看出‘组件哈哈’是子组件data里面的值,后面的那些路径是我从父组件里面穿过去的值,如上,组件的子父传参就做好啦

注意:

  • 如果没有出现效果,组件里面的数组没有 只有三种情况 1、组件里面的data中没有定义 2、父组件的参数不存在,或者没有传进去
    3、子组件里面接收参数的名字与父组件传进去的参数名字或者类型不一样
  • 可以定义接受多个参数
  • 然后你要传多个参数 就多写几个属性
  • 但是接的参数和传的参数名要一样
  • 你传的时候是orderList 接的时候也得要是orderList 然后用的时候也是orderList
  • 还有,自组件里面只能有一个一级标签
  • app.wxss在组件里面需要引入才能使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值