微信小程序自定义组件的使用

定义而一个自定义组件

  1. 以新建一个demo组件为例,首先在根目录下创建一个components文件夹,然后创建一个demo文件夹,分别创建demo.json,demo.wxml,demo.wxss,demo.js四个文件


  2. 在 json 文件中进行自定义组件声明(将 component 字段设为 true 可将这一组文件设为自定义组件)


  3. 还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法与页面的写法类似


  4. 在demo.js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。 组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。
    demo.js
  5. 使用自定义组件
    使用已注册的自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:


  6. 在页面的 wxml 中就可以像使用基础组件一样使用自定义组件


组件间通信

  1. 父组件通过属性的方式给子组件传递参数
  2. 子组件通过事件的方式向父组件传递参数

你可能感兴趣的:(微信小程序自定义组件的使用)