微信小程序开发(5)---自定义组件篇

微信小程序开发(5)—自定义组件篇

一.定义自定义组件

以新建一个demo组件为例，

1. 首先在根目录下创建一个components文件夹
2. 然后创建一个demo文件夹，分别创建demo.json,demo.wxml,demo.wxss,demo.js四个文件。
   
3. 在 demo.json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

{
  "component": true,
  "usingComponents": {}
}

4. 在 demo.wxml 文件中编写组件模板，写法与页面的写法类似

<button class="inner" 点击 子传父</button>

5. 在 demo.wxss 文件中加入组件样式，写法与页面的写法类似

/* 这里的样式只应用于这个自定义组件 */
.inner{
  color: red;
}

6. 在demo.js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。 组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   * 只能使用es5
   */
  methods: {
    handleTap:function(){
    }
  }
})

二.使用自定义组件

以使用一个demo组件为例

1. 使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
    "demo": "/components/demo/demo"
   }
}

2. 在页面的 wxml 文件中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值

<demo></demo>

三.组件间的通信

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

过程

1. 父组件把数据 {{tabs}}传递到 子组件的tabItems属性中
2. 父组件监听onMyTab事件
3. 子组件触发 bindmytap中的mytap事件