微信小程序的component

lightsmile

计算机

字数：1.7k字

时长：6分钟

发布于：2018年3月28日

我发现无法直接在样式即wxss里通过color属性设置icon组件的颜色，是无效的，只能通过在wxml里设置它的color属性为js传入的变量值或者是通过变量值来控制具体的颜色值。

我们可以将微信小程序中的components组件视为一个对象，没错，它本来就是一个对象，只是相对而言，它的初始化方法和设置方式不同于在一般的js语言中，它的data属性里是这个对象建立时初始化时的数据，作用域和生命周期伴随着component对象实例，而properties属性效果类似，均可以在component对象内部的函数和方法中使用this.data获取到，只是相对而言，data的数据是组件内部的数据，它是属于组件本身的属性，从设计上讲不取决于外部的应用场景；而properties属性则是暴露在组件外部的属性，它的作用相当于一般的编程语言中我们在new一个对象时做的初始化工作如new People(name=”lightsmile”,sex = false)，也就是说组件的一些业务属性是要通过这些属性接口来实现的，它是根据场景所制订的，具体实例体现在如：
```
<order-by bindtap="handOrderTap" id="fuck" test="{{5}}" data-tes="{{test}}" data-fuck="fuck" data-order="{{orders}}" data-></order-by>
```
中id是每个标签都具有的值，而以“data-”开头的数据都是这个页面中，暴露给触发事件的值，在事件处理函数中，可以通过如
```
handOrderTap(e) {
 console.log(e)
 console.log(e.currentTarget.id)
 this.fuck = this.selectComponent("#fuck")
 console.log(this.fuck.data)
 console.log(this.fuck.dataset)
}
```
获取到e（event）事件的具体信息，这里的handOrderTag只是自定义的函数，e.target和e.currentTarget分别代表不同的对象。

其中target是指事件的原触发对象，而currentTarget是指当前事件的触发对象，这是与事件的冒泡捕获机制相关的。

而不以“data-”开头，也不是如class、id、style等其他的属性如在上例中属性名为test的是页面传递给组件对象的信息，这里的test对应着组件对象之前设定的test属性，即在2中提到的暴露的属性名

而“=”号后面的“”和“”则均是属于当前页面的逻辑层Page对象内部的数据，即this.data.test和this.tata.orders（其中的this指代的是当前对象），也就是说，在与Component组件或页面Page对象对应的wxml中，其中的永远都是指的当前组件或页面对象，无法外指和内值，即在Component对应wxml中无法引用外部Page的对象（这个很合理，因为组件本来就是要被复用的，不应该出现还可以引用外部的数据的情况），Page对应的wxml中也无法引用内部Component对象的内部属性，而如果要使用内部的值，一种方法是内部定义触发的方法然后再使用如this.triggerEvent(‘change’, this)
触发外部的change事件，这样组件外部就可以使用bindchange=”方法名”进行handle处理了。
如下几个阶段：

1. 在Page的wxml中使用组件order-by,绑定了自定义事件MyEvent，这样在MyEvent事件被触发时，Page对象的handleMyEvent方法就会被执行。

2. handleMyEvent方法的内容如下：

3.Component的wxml中的text组件绑定tap事件到Component对象的myEvent方法

4.myEvent方法的内容如下：

因此整个的流程应当为：当我点击text文本的时候，会触发tap事件，这样它绑定的myEvent方法会被执行，然后方法内部又会主动引发MyEvent事件，这样在Page页面对其绑定的handleMyEvent方法会被执行，而该方法定义在Page对象内部。（注意不要搞混事件和方法，虽然我这里的名字比较混乱）控制台输出的结果为：

即先触发tap事件，再触发MyEvent自定义事件，下面我们来看一看内部传递的东西：

从中我们可以发现第一个事件e的currentTarget属性的dataset属性是一个空对象，对应着我们并没有在wxml的text组件内部填写“data-xx”属性，而第二个事件e的currentTarget属性的dataset属性是一个包含了fuck、order、tes三个属性的对象，尽管其中order和tes的内容为空（因为对应的数据在Page对象中没有，我错误的写成了Component对象内部的了，发现获取不到，这才有了这篇文章）。

因此一般情况下，我们可以通过这种事件的方式来实现数据的传递工作，并且 this.triggerEvent() 方法接收自定义事件名称外，还接收两个对象，eventDetail 和 eventOptions。这也就是说，我们完全可以不传递this，而传递任意自己定义的对象数据，比如在myEvent中我可以不传this，接着传e，我也可以定义只与业务相关的数据对象来处理，由于方法定义在页面或组件对象内部，可以访问内部数据，而通过事件传递后可以通过参数访问数据，以此就实现了组件向页面的数据传递工作。

当然，这样的一个特点是事件绑定是放在视图view层，而事件处理传递是放在逻辑js层，可能在做一些其他业务时还是需要相应的业务转化工作才可以，不够直接和方便，因为页面还是无法做到直接访问组件数据。

后来发现果然页面提供了这么一个方法：this.selectComponent(“#fuck”)
可以在页面js中使用selectComponent选择某个component组件对象的实例，在此之上可以继续访问到它的data属性、dataset属性和properties属性，分别对应的是组件的properties属性、data属性和properties属性，如下图所示：