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

时间:2021-6-4 作者:qvyue

定义而一个自定义组件

  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. 子组件通过事件的方式向父组件传递参数
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。