小程序系列3-组件

小程序系列3-自定义组件

方便自己学习和记录，如果错误，欢迎指正。

---

一、全局组件和页面组件

1、全局组件

全局组件定义在根目录components文件夹下。
右键新建文件夹test，在test文件夹下，右键新建Component，
便自动生成4个文件。test.js/test.json/test.wxml/test.scss
在根目录app.js里声明test全局组件：

 "usingComponents": {
    "test": "/components/test/test"
  },

2、页面组件

比如在pages/index文件夹下创建页面组件
右键新建文件夹index-swiper，在index-swiper文件夹下，右键新建Component，
便自动生成4个文件。index-swiper.js/index-swiper.json/index-swiper.wxml/index-swiper.scss
在index.json里声明index-swiper组件：

 "usingComponents": {
    "index-swiper": "./index-swiper/index-swiper"
  },

二、组件生命周期

1. 组件本身的生命周期

代码如下（示例）：

Component({
	lifetimes:{
	 created() {
	   console.log('组件刚刚被创建')
	 },
	 attached() {
	   console.log("在组件实例dom产生时执行")
	 },
	 ready() {
	   console.log('组件在dom渲染完成后执行')
	 },
	 detached () {
	   console.log('在组件dom结构被销毁时执行')
	 }
	}
})

2.组件所在页面的生命周期

从前台进入后台，或者在路由跳转后，组件所在页面没有被关闭,只是隐藏了，会触发show()；
再次切换页面或者从后台进入前台，会触发hide()
代码如下（示例）：

Component({
  pageLifetimes:{
	  show() {
	    console.log('组件所在页面显示')
	  },
	  hide() {
	    console.log('组件所在页面隐藏')
	  }
   }
)}

三、组件直接通信

1、父传子

父组件index中，使用index-swiper组件

<index-swiper name="{{name}}"></index-swiper>

父组件传进来的值会在子组件的properties里

<text>{{name}}</text>
<button bind:tap="changeName">改值</button>
properties: {
  // name: String // 简写
  name: { 
    type: String,
    value:'lisi'
  }
}

2、子传父

子组件

<text>{{name}}</text>
<button bind:tap="changeName">改值</button>
Component({
	methods: {
	  changeName() {
	    this.setData({
	      name:'李四' // 直接修改父组件传进来的值，不推荐
	    })
	    this.triggerEvent("getName", '李四') // 推荐
	  }
	},
)}

父组件

 <index-swiper name="{{name}}" bind:getName="getName"></index-swiper>
 Page({
  getName(event) {
   let {detail:value} = event
   this.setData({
     name: value
   })
  }
)}

3、slot使用

父组件

 <index-swiper>
   <slot name="slot1"></slot>
   <slot></slot>
   <slot name="slot2"></slot>
 </index-swiper>

子组件

<view slot="slot1">slot1</view>
<view>默认</view>
<view slot="slot2">slot2</view>

4、获取组件实例

this.selectComponent获取子组件实例对象
父组件

 <index-swiper class="index-swiper"></index-swiper>
onReady: function () {
  console.log('onReady 页面渲染完成')
  const child = this.selectComponent(".index-swiper")
  console.log(child.data)
},

四、监控组件中data值的变化

单个值的变化

 observers:{
   check: (v)=>{
     console.log('@@@@'+v)
   }
 },

多个值的变化

'name,check':(nameNew,checkNew)=>{
    console.log(nameNew, checkNew)
  }

五、behaviors-组件代码共享

behaviors就是代码复用，类似hooks
在组件文件里新建behavior.js

let behavior = Behavior({
  data: {
    name:'哈哈哈'
  },
  methods: {

  },
  lifetimes :{

  }
})
export default behavior

在子组件js中引用并注册

import behavior from './behavior'
Component({
	behaviors:[behavior],
})