6.微信小程序 - 自定义组件

创建

根目录下创建components文件夹，在componets文件夹下创建单独文件夹作为子组件，右击新建components命名

修改隔离选项

//在组件的.js中新增如下配置
Components({
 options:{
     stylesolation:'isolated',  // 启用样式隔离 默认值
     //apply-shared   页面样式影响组件，组件不影响页面
     //shared         组件和页面互相影响
 }
})

//或在组件的.json文件中新增如下配置
{
    "stylesolation":"isolated"
}

properties属性

Componets({
  properties: {
    //第一种  简化方式
    // max: Number
    //第二种 完整定义方式
    max:{
      type:Number,
      value:10
    }
  },
})

<my-test max="10"><my-test>
    
//注：properties与data全等 

数据监听

Components({
  observers:{  
      '字段A，字段B':function(字段A的新值，字段B的新值){
          //do something
  }
})

    
    
//监听对象
observers:{
    //监听对象某个属性
   'rgb.r,rgb.g,rgb.b': function (r,g,b) {
       this.setData({
         fullColor: `${r},${g},${b}`
       })
     },
    //**通配符可以监听对象的所有属性
     'rgb.**': function (rgb) {
      this.setData({
        fullColor: `${rgb.r},${rgb.g},${rgb.b}`
      })
    }  
} 

 组件生命周期

created                 //组件实例刚被创建时执行
attached                //组件实例进入页面节点树时执行
ready                   //组件视图布局完成后执行
moved                   //组件实例被移动到节点树另一个位置时执行
detached                //组件实例被从页面节点树移除时执行
error                   //组件方法抛出错误时执行

建议写在lifetimes对象中（优先级最高）

局部引用组件

在页面的.json文件夹中，引入组件
{
    "usingComponents":{
        "my-test1":"/components/test1/test1"
    }
}


在页面的.wxml文件中，使用组件
<my-test1><my-test1>

全局引用组件

//在app.json文件中引入组件
{
    "usingComponents":{
         "my-test2":"/components/test2/test2"
    }
}
在页面的.wxml文件中使用组件
<my-test2><my-test2>

父组件给子组件传值

通过properties传值

//父组件.json

{
  "navigationBarTitleText": "父子传值",
  "usingComponents": {
    "componentB": "../../components/son/son"
  }
}

//父组件.wxml
<view>
	<componentB paramAtoB='{{paramAtoB}}' ></componentB>
</view>

//父组件.js
  data: {
    paramAtoB: "我是父向子传的值",
  },

//子组件.wxml
<view>{{paramAtoB}}</view>

//子组件.js
  properties: {
    paramAtoB: {
      type: String,//类型
      value: 'default value'//默认值
    },
  } 

子组件给父组件传值

1.子组件写一个bind:myevent属性绑定父组件的onMyEvent方法

2.子组件使用triggerEvent方法将值发送出去

3.父组件在onMyEvent方法中接收子组件传来的值

//子组件.wxml
<view>
	<button bindtap='change'>向父组件传值</button>
</view>

//子组件.js
methods: {
     change: function () {
      this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
    }
  }

//父组件.wxml
<view>
	<componentB bind:myevent="onMyEvent"></componentB>
	{{ paramBtoA }}
</view>

//父组件.js
data: {
    paramBtoA: "我是子向父传的值",
  },
onMyEvent: function (e) {
    this.setData({
      paramBtoA: e.detail.paramBtoA
    })
  },

获取组件实例，传值

//父组件html中 
            //class或者id选择器 
<my-test  class="customA" id="cA"></my-test> 
<button bindtap="getChild">获取子组件的实例对象</button>
//父组件.js中
Page({
    getChild(){
        //可以通过this.selectComponent('id或class选择器')获取到子组件
         const child=this.selectComponent('.customA')
          //  child.setData({
         //   count:child.properties.count+1
        // })
         child.addCount()  //调用子组件得事件
},
})  

behaviors （类似vue中得mixins)

//每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用时，他的属性、数据和方法会被合并到组件中。


//1.根目录中创建behaviors文件夹/my-behavior.js
//module.exports将behavior实例对象共享出去
module.exports=Behavior({
  //属性节点
    properties:{},
    //私有数据节点
    data:{username:'zs'},
    methods:{},
    //其他节点...
   
})

//2.导入并使用behavior
const myBehavior=require("../../behaviors/my-behavior")

Components({
//3.将导入得behavior实例对象 挂载到behaviors数组节点中 即可生效
    behaviors:[myBehavior],
})

//总结：
同名字段得覆盖和组合规则：
data：如果是对象类型，进行合并
      其余情况组件 > 父behavior > 子behavior