全局事件的注册与触发
示例：
- 新建一个components/b.vue，并注册全局事件updateNum：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <template>
<view>
num: {{ num }}
</view>
</template>
<script>
export default {
data() {
num: 0
},
created() {
uni.$on('updateNum', num => {
this.num += num;
});
}
}
</script>
|
- 新建一个components/a.vue， 并触发全局事件updateNum:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <template>
<view>
<button @click="addNum">修改b组件的值</button>
</view>
</template>
<script>
export default {
methods: {
addNum() {
uni.$emit('updateNum', 10);
}
}
}
</script>
|
使用插件
开发者可在Dlound插件市场中找到各种插件，这里找到了Calendar插件。
点击右边的”使用HBuilderX导入插件”引入Calendar插件。
这时在项目中的components文件夹下面会多出来一个calendar-lch/calendar-lch.vue组件。
将它引入页面中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <template>
<uCalendar
field="day"
currentDate="2022-01-23"
startDate="2021"
endDate="2023"
@calendarChange="selectDateFun"
@columnChange="columnChangeFun">
</uCalendar>
</template>
<script>
import uCalendar from
'../../components/calendar-lch/calendar-lch.vue';
export default {
components {
uCalendar
},
methods: {
selectDateFun() {
console.log('选择日期完成后触发');
},
columnChangeFun() {
console.log('日期轮盘的选中值改变时触发');
}
}
}
</script>
|
参考：
26-组件之间的通讯方式
27-uni-ui组件库的基本介绍和使用