微信小程序(七)- 自定义组件

103 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第7天,点击查看活动详情

本次系列文章参与八月的更文活动,记录一个微信小程序从零到有的开发过程。本文为本系列七篇:了解关于自定义组件
本文是关于如何自定组件以及基本的编写和使用方法。下文会讲解关于父子组件传值的讲解。

1.新建自定义组件

本次想要新建一个学校列表的组件,那么则在微信开发者工具中新建一个Component的组件目录,再新建一个shool文件夹,再点击新建Component,则会自动生成四个文件,与组件的页面结构一致,效果如图二

image.png

image.png

2.完善自定义组件内容

自定义组件的编写语法和逻辑大致和普通组件一致。但需要注意的是以下对比:

父组件:

image.png

自定义组件:

image.png

通过以上对比,可以得出,自定义组件的代码写在Component中,而普通组件则是写在page中,其中,还需要注意的是,自定义组件的方法需要写在methods中,转入自定义组件的属性写在properties中,使用方法则和写在data的属性一样使用即可。

3.引入自定义组件

接下来,如果哪个页面需要引入自定义组件的,那么就在那个页面的json文件中进行声明,如下代码:

{
  "usingComponents": {
    "School":"/Component/School/School"
  }
}

4,使用自定义组件

关于自定义的使用就很简单了,只需要在需要用到自定义组件的页面的wxml 上直接使用 自定义组件即可,如下代码所示:

   <School></School>