微信小程序自定义组件小案例

第一步准备好微信小程序开发工具并创建一个项目

第二步创建一个将要使用组件的页面,和一个存放组件的页面例如下图

第三步:在子组件上编写布局/样式/js逻辑等内容并在父页面使用

在父页面的json文件中配置需要的子组件如下图:

在父页面的wxml中使用:(json中的key值就是标签名)

这时就可以在模拟器中看到效果了

第四步:父页面向子组件传值 配置如下:

父页面:(js中的data中有一个变量countNum)
正常来说数据应该是通过网络请求来的,这里省略了,用模拟数据代替

子组件:

到这一步:如果给子组件添加了点击事件,数据就可以变化了,但是变化的数据并没有返回给父页面,并不是想要的效果,
这里奉上组件的两个点击事件

上图中的class="{{count===1?‘prohibit’:’ '}}"这个是限制点击减号是不能让数字小于1
同时在子组件上的wxss配置如下:

第五步:子组件向父页面返回值或者说传值

父页面配置事件:bind:change=changeNumber

changeNumber在父页面的js中实现


到这里父页面的数据可以传递给子组件了,而经过子组件改变的值也能返回给父页面继续使用了

下面说一个第二种 子组件向父页面传值的方式:

外一个 方式 传递参数 （子传父）
父组件通过this.selectComponent拿到子组件中的数据前提条件需要在父组件的引用自定义组件上,添加class或id
例如:在count组件上添加了一个class类count

而changeNumber事件中可以这样写:

至此,结束.感谢您的阅读,希望能给您带来一点点启发!
如果觉得对你有用,点个赞呗!