携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第7天,点击查看活动详情
本次系列文章参与八月的更文活动,记录一个微信小程序从零到有的开发过程。本文为本系列七篇:了解关于自定义组件
本文是关于如何自定组件以及基本的编写和使用方法。下文会讲解关于父子组件传值的讲解。
1.新建自定义组件
本次想要新建一个学校列表的组件,那么则在微信开发者工具中新建一个Component的组件目录,再新建一个shool文件夹,再点击新建Component,则会自动生成四个文件,与组件的页面结构一致,效果如图二
2.完善自定义组件内容
自定义组件的编写语法和逻辑大致和普通组件一致。但需要注意的是以下对比:
父组件:
自定义组件:
通过以上对比,可以得出,自定义组件的代码写在Component中,而普通组件则是写在page中,其中,还需要注意的是,自定义组件的方法需要写在methods中,转入自定义组件的属性写在properties中,使用方法则和写在data的属性一样使用即可。
3.引入自定义组件
接下来,如果哪个页面需要引入自定义组件的,那么就在那个页面的json
文件中进行声明,如下代码:
{
"usingComponents": {
"School":"/Component/School/School"
}
}
4,使用自定义组件
关于自定义的使用就很简单了,只需要在需要用到自定义组件的页面的wxml
上直接使用 自定义组件即可,如下代码所示:
<School></School>