携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章微信小程序笔记（三）中，我们学习了微信小程序的相关知识点，包括block标签、监听事件、阻止冒泡等相关知识点。在本篇文章中，我们将学习事件捕获、事件对象与参数传递、setData方法等相关知识点。
事件捕获
事件的捕获阶段是事件从最外层组件向事件目标组件逐层传递。
- 监听捕获阶段的事件语法：
capture-bind:事件名。 - 阻止捕获事件传递的语法：
capture-catch:事件名。
在 wxml 中编写两个父子结构的组件，并使用 bind事件名 进行事件监听(从里到外)。
<view style="width: 300rpx; height: 300rpx; background-color: pink;" bind:tap="tapHandler1">
外层
<view style="width: 200rpx; height: 200rpx; background-color: teal;" bind:tap="tapHandler2">
内层
</view>
</view>
在页面js中编写事件监听函数。
Page({
tapHandler() {
console.log('我被触摸了');
},
tapHandler1() {
console.log('外层被点击了...');
},
tapHandler2() {
console.log('内层被点击了...');
}
})
在父元素使用 capture-bind:事件名 来监听捕获阶段(从外到里)。
<view style="width: 300rpx; height: 300rpx; background-color: pink;" capture-bind:tap="tapHandler1">
外层
<view style="width: 200rpx; height: 200rpx; background-color: teal;" capture-bind:tap="tapHandler2">
内层
</view>
</view>
事件对象与参数传递
vue中可以@click="handle(1, 'abc', $event)"。小程序中不可以函数调用, 也就是没法直接传递参数。小程序通过通过自定义属性 配合 事件对象。可以通过事件监听函数的第一个参数来获取事件对象。可以通过组件的自定义属性（data-xxx）向事件监听函数传递额外的数据。
在页面中为 view 组件添加自定义属性及事件监听。
<button data-id="1" bind:tap="remove">按钮</button>
<button data-id="2" bind:tap="remove">按钮</button>
<button data-id="3" bind:tap="remove">按钮</button>
在js中添加监听函数，并从事件对象中获取自定义属性。
Page({
remove(e) {
console.log(e);
console.log(e.target.dataset);
}
})
setData方法
在页面js中可以调用 this.setData() 更新 data 中的数据，语法如下：
this.setData(
// 第一个参数：是一个对象，表示要更新的数据 { data1: ...., data2: .... },
// 第二个参数：是一个函数，会在视图重新渲染完后执行 () => { }
)
setData 执行时的重要细节：
- 以同步的方式更新逻辑层的
this.data中的数据 - 以异步的方式将数据从逻辑层发送到视图层，触发视图层的重新渲染
在 page.js 中定义视图要使用的数据
Page({
data: {
message: "Hello,World"
}
})
在 page.wxml 中编写一个 view 组件并展示 data 中的 message 数据。
<view>{{ message }}</view>
在 page.wxml 中编写一个按钮并添加事件监听，并调用 setData 更新 message 数据。
<button bind:tap="updateMessage">更新message</button>
Page({
data: {
message: 'hello, world!'
},
updateMessage() {
console.log('更新前', this.data.message);
this.setData(
{
message: '你好, 小程序!'
},
() => {
console.log('渲染结束了...');
}
)
console.log('更新后', this.data.message);
}
})
