小程序组件化开发

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

注意:

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

你可能感兴趣的:(小程序,vue,小程序,组件,子父传参)