公司要开发小程序,之前用惯了vue里面各种组件化,于是尝试在小程序里也尝试用组件化开发,官网的文档实在简单,网上找了个demo,照着方法基本可以实现,先记录一下。
先上效果图。
首先需要新建components,再右键新建component,输入对应的组件名称
在popLogin.json配置如下
{ "component": true, "usingComponents": {} }
pop.wxml和popLogin.wxss跟普通的写法一样,不累赘。
重点是组件通信,跟vue的组件通信很像,prop进行父组件向子组件传值,而子组件向父组件传值采用triggerEvent,
this.triggerEvent("loginStatus",{'isLogin':true});
父组件向子组件传值采用properties,跟vue的props很像
properties: { //传值标题 title: { // 属性名 type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value: '标题' // 属性初始值(可选),如果未指定则会根据类型选择一个 }, },
index.json配置component
"usingComponents": { "popLogin": "/components/PopLogin/popLogin" }
然后调用就可以了,具体项目上都有。
具体项目放到github上了