小程序之组件实例要他有啥用开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

您能看到啥

事件选项
获取组件实例

事件选项

在小程序之自定义组件(二)这篇文章中的触发事件中,我们忽略了triggerEvent方法中的事件选项功能.在我认真的思考了一下,觉得这个参数,在实战中,有时候还是很有必要的.所以我在这里补充一下.

先回顾一下triggerEvent方法

/** 触发事件，参见组件事件 */
triggerEvent<DetailType = any>(
    name: string, /** 绑定事件名字*/
    detail?: DetailType, /**回调数据*/
    options?: TriggerEventOption /**事件选项*/

): void

options主要包含如下几个属性

参数	类型	必填	默认值	含义
bubbles	Boolean	否	false	触发事件是否冒泡执行
composed	Boolean	否	false	触发事件是否可以透传到组件边界外.为false时.触发事件只能在引入组件的节点树上触发.不会透传到其他组件内部.
capturePhase	Boolean	否	false	事件是否拥有捕获阶段

冒泡执行:当组件上的事件触发后,就执行事件传递,一直寻找到父节点,继续进行传递.如果阻止冒泡执行,事件只会传递到被执行的那个树节点上.

事件是一个比较有意思的功能,我将会在后续文章里仔细分享一下.

下面我简单举例说明一下

index代码如下所示

<subtest title="我是父组件" bindtest="tapsub">
    <test title="我是子组件" bindtest="taptest"></test>
</subtest>

taptest() {
    console.log("响应test")
},
tapsub() {
    console.log("响应sub")
},

test子组件代码如下

# wxml代码如下
<view bindtap="tap">{{msg}}</view>
# js 代码如下
tap() {
   this.triggerEvent("test", {});
 # this.triggerEvent("test", { bubbles: true },);
 # this.triggerEvent("test", {}, { bubbles: true, composed: true });
}

在官方文档中,举例说明了响应结果,但我这里测试复现的结果,还是有点问题的.知道的可以评论告知一下. 我们这里直接显示各种事件选项的执行结果.

事件	结果	说明
默认		由于阻碍了冒泡事件.所以只用自己响应事件了
bubbles: true		本应该,它依次执行响应test``响应sub,但我这里只显示`响应test`.留个疑问.
bubbles: true, composed: true		事件透传

获取组件实例

从微信官方文档里,我们可以知道.在父组件里,可以通过this.selectComponent来获取组件的实力对象.

怎么说呢,理想很丰满,现实很骨感.文档确实很简单,当我在实践的时候,就发现获取不到,比如我想获取上面中test组件的实例.并且我还天真的以为,组件的标识不就是我在json文件中usingComponents定义的名字吗?,可当我去获得时候,结果如下所示

截屏2022-12-07 17.56.13.png 我以为是我标识字符写错了,代码如下所示:

getChildComponent() {
    const child = this.selectComponent(".test")
    console.log("test组件实例为:" + child)

我又认真对比了一下,没得问题啊.那就是标识不对.经过几次尝试后,可以通过两种方式来获取.

给组件设置id

设置id

<test id="ts"></test>

获取组件实例

const child = this.selectComponent("#ts");

给组件设置class
- 设置class
```
<test class="ts"></test>
```
- 获取组件实例
```
const child = this.selectComponent(".ts");
```
统一输出实例data,结果如下所示:

经过上面的配置,我们就可以获取组件实例,但我们获取实例能干什么呢.
1. 数据赋值
  
  从实例的打印中,我们可以看到data字段.如下所示上面的字段就是组件里js文件中的properties和data两个字段的集合.那我们是不是可以直接赋值.经过测试是可以的.测试用例,如下所示
```
    const child = this.selectComponent(".ts");
    console.log("test组件实例为:")
    console.log(child);
    child.setData({
        msg: "测试msg",
        title: "测试title"
    })
    console.log(child.data);
```
  输出结果如下所示: 但界面显示结果如下所示
  
  从界面显示效果上我们知道,虽然我们赋值了msg字段为测试msg.但显示结果依然是测试title,说明触发了title状态监听事件.导致msg字段的值被修改成了title.

截屏2022-12-07 18.29.12.png

所以,在自己实战中,一定要注意事件的先后顺序,以及赋值操作时,切记核实字段事件.

触发事件

实例既然可以赋值操作,那我们实例中的methods的方法应该也是可以的.测试用例如下所示

const child = this.selectComponent(".ts");
child.tap();
# 输出结果如下所示:
响应test

小程序之 组件实例要他有啥用

您能看到啥

事件选项

获取组件实例

小程序之组件实例要他有啥用