小程序：自定义组件详解

问题导向

微信小程序的组件属性有哪些？如何使用？

如果你都有了答案，可以忽略本文章，或去小程序学习地图寻找更多答案

---

组件通信

父向子：
传递：属性
接收：this.properies

子向父：
传递：this.triggerEvent
接收：自定义事件函数

---

组件属性

Component({
  //组件的属性列表
  options: { 
  	multipleSlots: true                    开启插槽，使用多个插槽
  },
  externalClasses: ['tag-class'],		   外部样式类
  behaviors: [homeBeh],						   提取组件的公共属性
  properties: {}                           组件开放属性，从父组件接收到的属性

  //组件的初始数据
  组件私有数据：等于react的state，vue的data，可以使用this.setData()直接改变properties的值
  data: {},

  //组件的方法列表
  methods: {}
})

---

properties

组件开放属性：组件从父组件接收到的数据，等于react的props

observers数据监听器
作用：监听组件数据的变化，当数据改变时，做相应处理
参数：参数1：新值，参数2：旧值

注意：
1.不能在observers中使用setData，需要用data做中间处理，不然会造成死循环
2.处理对象的值使用[‘obj.count’]
3.可以使用随机字符串来触发observer

properties:{
	//写法一：声明接收的类型或初始值
    like:{
        type:Boolean, //类型
        value:false  //初始值，可选
    }
    
    //写法二：对传递过来的数据进行处理
    index:{
        type:Number,
            
        //监听函数：参数1：新值，参数2：旧值
        observer:function(newVal,oldVal,changedPath){
            let val = newVal < 10 ? '0' + newVal : oldVal
            this.setDate({
                _index:val  //使用_index过渡处理，不然会递归
            })
        }
    }
    
	//写法三：对传递过来的数据进行处理，使用methods中的函数
	more: {
      type: String,
      observer: 'loadMore'
    }

	//写法四：对象属性的写法
	observer: {
	    ['obj.count'](count){
	        this.setData({
	            _count:this.tranNumber(count,2)
	        })
	    }
	}
}


data:{}

methods: {
	loadMore(){}
}

---

Behavior

提取组件的公共属性，公共行为，当做component使用，可以提取properties，data，method

1.代码复用
2.可执行生命周期
3.组件的同名会覆盖Behavior，类似继承

//定义
let homeBeh = Behavior({
  properties:{
    img:String,
    content:String,
  }
})
export {homeBeh}



//在组件中使用  = 继承或mixin
import {homeBeh} from '../home-beh'
Component({
  behaviors:[homeBeh],  //该组件已经可以接受img和content属性了
  properties: {},
  data: {},
  methods: {}
})

---

slot插槽

slot插槽 = 占位符，父组件如果传递了标签或数据，则匹配对应的插槽位置渲染，否则不渲染

启动slot插槽：
options:{ multipleSlots:true }

组件声明时：
<view>
    <text>{{ comment }}</text>
    <slot name='after'></slot>
</view>


在父组件使用时：v-tag传递了text，则会渲染item.count的内容，否则只显示item.content
<v-tag class="tag" comment="{{item.content}" >
    <text slot="after" class="comment-count">{{'+' + item.count}}</text>
</v-tag>

---

外部样式类

如何给自定义组件中的组件设置样式？

第一种：hack
.className > v-tag:nth-child(1) > view {}

第二种：开源组件方式，平衡默认样式与自定义
由父组件 传递 样式类名 给子组件，不需要子组件自己写样式
不会完全覆盖默认样式，会覆盖同名样式，需要加上!importrant

第一步：在子组件的js文件添加
externalClasses:['tag-class']  //组件不能修改外部传递过来的样式类，但可以用另一个类名来设置
properties: {}

第二步：添加类名，该组件即有container的样式，也有tag-class的样式
<view class="container tag-class">
  	<text>{{ comment }}</text>
    <slot name='after'></slot>
</view>


第三步：传递组件样式
<v-tag tag-class="{{index == 0 ? 'ex-tag1' : '' || index == 1 ? 'ex-tag2' : ''}}" class="tag" comment="{{item.content}" >
    <text slot="after" class="comment-count">{{'+' + item.count}}</text>
</v-tag>


第四步：写好样式
.ex-tag{
  background-color:  #fffdbb !important;
}

.ex-tag2{
  background-color: #eefbff !important;
}

---

wxs

功能：可以在wxml中调用函数
作用：过滤器，中间件

1.新建  name.wxs文件，导出函数，必须使用var，因为只能使用es5的语法
var format = function(text){
  return 'hello'
}
module.exports = {
  format:format
}

2.引入
<wxs src="../../utils/filter.wxs" module="util" />
    
3.使用
<text class="content">{{util.format()}}</text>

---

学习更多

小程序学习地图