miniProgram

自定义组件

自定义组件

文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

一、创建自定义组件

  1. 在根目录中新建文件夹components/组件名/

  2. 创建好文件夹后可以在微信开发者工具中快速新建组件需要的各个文件。

  3. 在需要引入该组件的页面的文件夹中打开对应json，引入需要的组件(这里是Tabs组件)：

    1
    2
    3
    4
    5
    {
      "usingComponents": {
        "Tabs": "../../components/Tabs/Tabs"
      }
    }

  4. 在页面的wxml中使用组件：

    1
    <Tabs></Tabs>

二、组件的特点

组件与普通页面方法编写的位置差别：

  • 在普通页面中方法书写的位置与data、onload等成员同层级
  • 而在组件中，方法必须写在methods对象中

三、数据父传子

父组件向子组件传递数据：父组件通过标签的attributes写入数据，子组件通过properties接收数据。

1
2
<!-- 父组件.wxml -->
<Tabs str="这是一个字符串"></Tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 子组件.js
Component({
    properties: {
        str: {
            type: String, // 这里要写清楚数据类型
            value: '这里还没有数据' // 默认值，没有传入数据的话使用这个值
        }
    },
    methods: {
        handleEventSon () {
            console.log(this.data.str) // 数据会直接复制一份到data中，改变数据不会影响父组件
        }
    }
})

wxml中使用数据的时候直接写变量名就好：

1
2
<!-- 子组件.wxml -->
<view bindtap="handleEventSon">{{str}}</view>

注意：在子组件中用setData方法改变父组件传入的properties数据不会影响到父组件中的数据！！！需要通过子传父把数据返回给父组件。

四、数据子传父

子组件向父组件传递数据：子组件触发父组件中给子组件标签上注册的自定义事件，并传入需要传递的数据

子组件通过this.triggerEvent方法来触发自定义事件

1
2
<!-- 子组件.wxml -->
<view data-newstr="新字符串" bindtap="handleEventSon">{{str}}</view>
1
2
3
4
5
6
7
8
9
10
// 子组件.js
Component({
    data: {},
    methods: {
        handleEventSon (e) {
            const {newStr} = e.currentTarget.dataset
            this.triggerEvent('eventdad', newStr)
        }
    }
})
1
2
<!-- 父组件.wxml -->
<Tabs str="{{str}}" bindeventdad="handleEventDad"></Tabs>
1
2
3
4
5
6
7
8
9
10
11
12
// 父组件.js
page({
    data: {
        str: '这是一个字符串'
    },
    handleEventDad (e) {
        const newStr = e.detail
        this.setData({
            str: newStr
        })
    }
})

五、插槽

父组件使用了子组件后，可以在双标签中编写其他内容，这些内容最后会替换掉子组件中的slot标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 父组件.wxml  这里使用了block标签来包裹内容，相当于templete标签 -->
<Tabs>
    <block>
    	<view>这是插槽内容，将会替换子组件中的slot标签</view>
    </block>
</Tabs>

<!-- 子组件.wxml -->
<view>
	<view>这是子组件中其他内容</view>
    <slot></slot>
    <view>这是子组件中其他内容</view>
</view>

六、组件Component函数常用参数

属性：

  1. properties: 组件接收的数据
  2. data: 组件自身数据
  3. observers: 里面的方法可以用来监听数据(组件独有属性，页面中不存在)
  4. methods: 组件自身的方法

生命周期钩子函数：

  1. created: 组件刚刚被创建时执行，此时不能调用setData方法
  2. attached: 组件插入页面节点树时执行，这时才能调用setData方法
  3. ready: 组件布局完成后执行
  4. moved: 组件被移动到节点树其他位置时执行
  5. detached: 组件被从节点树中移除时执行