微信小程序-自定义组件

1.如何新建自定义组件

​ **步骤：**在根目录下，新建components文件夹，然后再新建组件对应的文件夹，再在当前文件夹新建component即可生成对应的.js/.json/.wxml/.wxss文件

2.组件和页面的区别

• ​ .json文件中需要声明“components”:true属性
• ​ .js文件中调用的是Components()函数
• ​ 组件的事件处理函数需要定义到methods节点中

3.自定义组件的引用

​ 3.1全局引用

​ 在app.json中，添加usingComponents属性,属性值为对应的组件名称

  //属性
	"usingComponents": {
        //组件名 ： 路径
    "my-test":"/components/test/test"
   } 

​ 3.2局部使用

​ 在页面的.json中usingComponents配置即可

4.自定义组件样式隔离

​ 4.1app.wxss中的全局样式对自定义组件无效

​ 4.2只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响

​ 4.3 自定义样式隔离特性能够防止组件内外样式相互干扰，若希望在外界能够控制组件内部的样式，可以通过styleisolation修改组件的样式隔离选项。

//在自定义组件的.json文件添加配置
{
  "styleIsolation":"isolated"
}

可选值	默认值	描述
isolated	是	相互隔离
apply-shared	否	页面wxss影响到组件
shared	否	相互影响

5.自定义组件之属性properties

用来接收外界传递到数组中的数据

<!--my-test是自定义组件名，max是自定义属性-->
<my-test max="6"></my-test>

Component({
  /**
   * 组件的属性列表
   */
  properties: {
      属性名:{
          type:Number,//属性的数据类型
          value:3 //属性默认值
      },
      //简写
      属性名:数据类型
  }
 )

6.自定义组件之数据监听器

**作用：**监听和响应任何属性和数据字段的变化

•  Component({
     	observers:{
           //当字段相似内容比较多时，可以使用通配符**表示
           '字段A,字段B':function(字符A的新值，字段B的新值 ){
             //do something  
           }
     	}
   )
  

7.自定义组件-纯数据字段

**概念：**指的是不用于界面渲染的data字段

应用场景及好处：

​ 在当前组件内部使用。有助于提升页面更新的性能。

使用规则：

​ 在Component构造器的options节点中，指定pureDataPattern为正则表达式

​ 在data中定义的字段名符合这个正则表达式的字段为纯数据字符

Component({
  options: {
  		//以_开头的数据
      pureDataPattern:/^_/
  },
  data:{
      // 纯数据字段，符合了正则表达式
      _dataInLogic：0，
      // 普通数据字段
      number: 1
  }
})

8.自定义组件-组件生命周期

8.1 组件主要的生命周期函数

​ 重要的声明周期函数有3个，分别是created/attached/detached。

​ created生命周期函数： 组件实例刚被创建好的时候被触发， 不能调用setData函数

​ attached生命周期函数： 组件初始化完毕进入页面节点树后被触发， this.data初始化完毕

​ detached生命周期函数： 组件离开页面节点树后被触发

Component({
  lifetimes:{
    //页面加载后
    attached(){},
    //页面退出后
    detached(){}
  }）

8.2 组件所在页面的生命周期函数

​ 自定义组件的行为依赖于页面状态的变化，根据组件所在页面的生命周期函数定义行为

​ 需要定义在pageLifeTimes节点中：

Component({
  pageLifetimes:{
    //页面被展示时调用的函数
    show:function(){},
    //页面被隐藏时调用的函数
    hide:function(){},
     //页面尺寸变化时调用的函数
    resize:function(size){},
  }）

9.自定义组件-插槽

​ 自定义组件的wxml结构中，可以提供 一个 <slot></slot> 节点座位插槽，用于承载组件使用者提供的wxml结构。

<!--自定义组件-->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!--组件使用-->
<component-tag-name>
	<view>这里是插入到组件slot中的内容</view>
</component-tag-name>

启动多个插槽：

​ 在组件的.js文件中，通过以下代码启用：

Component(
{
    options:{
        multipleSlots:true
    }
})

定义多个插槽：

​ 在.wxml中使用多个<slot>标签，以不同的name来区分不同的插槽

<!--自定义组件-->
<view class="wrapper">
  <slot name="s1"></slot>
  <slot name="s2"></slot>
</view>	

10.父子组件之间的通信的3种方式

10.1 属性绑定

​ 父组件向子组件的指定属性设置数据，仅能设置Json兼容的数据

<!--父组件-->
<view>
   {{count}}
</view>

<!--子组件-->
<my-test3 count="{{count}}"></my-test3>

//父组件的count属性定义
Page({
data: {
    count:0
 }
})

//子组件的count属性定义
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    count:Number
  }
})

10.2 事件绑定

​ 子组件向父组件传递数据，可以传递任意数据

​ 4步：

​ 01.在父组件的js中定义一个函数

​ 02.在父组件的wxml中，通过自定义事件的形式，将定义的函数引用传递给子组件

<!--bind:自定义事件名称="函数名"-->
<my-test3  bind:sync="函数名"></my-test3>

​ 03.在子组件的js中，通过在js文件的methods中，调用 this.triggerEvent(‘自定义事件名称’,{参数对象}) 将数据发送给父组件

​ 04.父组件定义的函数体中，通过e.detail获取到子组件传递来的数据

Page({
    //注意添加参数e
    函数名(e){
        this.setData(
          {
            count:e.detail.参数属性名
          }
        )
      }
  }
)

10.3 获取组件实例

​ 父组件通过在js文件中，通过定义函数，在函数中使用 this.selectComponent() 函数获取子组件实例对象

​ 这样可以直接访问子组件的任意数据和方法

//获取子节点
getChild(){
    const child = this.selectComponent('子组件的类或id选择器')
    //调用子组件的setData方法设置数据
    child.setData({})
}	

11.自定义组件-代码共享-behaviors

01.每个behavior可以包含一组属性、数据、声明周期函数和方法

​ 特点：1个组件可以引用多个behavior, 1个behavior也可以引用多个behavior

​ 例：在根目录下创建behavior.js,调用哪个Behavior()构造方法创建一个共享的behavior实例

02.在组件的js文件中通过require()方法导入，挂载后即可访问behavior中的数据或方法

//导入
const myBehavior =require('../../behavior/behavior')
//过载
Component({
  behaviors:[myBehavior]
 })