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

自定义组件

官方文档
类似于vue或者react中的自定义组件，小程序允许我们使用自定义组件的方式来构建页面

创建自定义组件

类似于页面，一个自定义组件由json、wxml、wxss、js 4个文件组成
可以在微信开发者工具中快速创建组件的文件结构
在这里插入图片描述
在文件夹内components/myHeader，创建组件名为 Tabs

查看自动创建的js文件，里面变成是Component包裹的构造函数，页面是Page。
下面这个方法是接收父组件向当前组件传递的数据的
在这里插入图片描述
下面这个方法是存放组件中用到的方法，与以前page页面是放在与data同层级中不同

打开json文件，里面的component为true表示当前这个是组件；
一个组件还可以引用另一个组件，要在usingCompents里面配置，里面放键值对，属性名就是组件名，值就是组件的路径。
在这里插入图片描述

使用组件

在wxml页面中直接把引入的组件当成标签使用就可以

父组件（页面）向子组件传递数据

1,通过标签属性的方式来传递

<Tabs aaa="123"></Tabs>

2,在子组件js文件上进行接收

  properties: {
    //要接收的数据名称
    aaa:{
      // type 要接收的数据类型
      type:String,
      // value 默认值
      value:""
    }
  },

3，把properties中的数据当成是data中的数据使用就可以

子组件向父组件传递数据

通过子组件触发父组件中绑定bind的自定义事件，同时传递数据给父组件。
语法：this.triggerEvent("父组件自定义事件名称",要传递的参数)
例子：

this.triggerEvent("itemChange",{index});

在父组件的事件处理函数中事件对象event.detail里面就可以获得子组件传递来的数据

handleItemChange(e){
    const {index}=e.detail;
}

组件中的插槽

在子组件中通过slot标签定义插槽的位置，等到父组件调用子组件的时候再传递标签过来放置在插槽的位置，然后slot标签被替换。

组件的其他属性

在这里插入图片描述
observers属性相当于vue中的watch，当监听的数据发生变化的时候触发里面的函数，但是observers只存在组件中，页面中没有。

组件生命周期的回调函数
created是组件刚刚实例化的时候触发，这时还可以使用setData；
attached是组件实例化完成开始渲染到页面的时候触发，这时可以使用setData了。
ready是组件以及渲染完成了，页面中可以看到完整的组件了时候触发。.
moved是组件实例被移动到另外一个节点的时候触发；
detached是组件被销毁的时候触发；