在Vue的模板内捕获组件内抛出的值$events的使用, 常见的使用方式如下:
1
2
3
4
5
| <!-- 当前组件 -->
<template>
<!-- 只能获取$event里的第一个值 -->
<component @event="handler($event, 1, 2)"/>
</template>
|
上述情况是当按钮发生点击则在当前组件执行方法并传入三个参数, 第一个是component抛出的值, 第二个和第三个属于自定义的值, 如果component组件event事件抛出的是多个参数怎么办呢? 有以下几种解决的办法:
-
- 子组件抛出
对象类型位置参数(可以改动子组件的情况下)
-
- 代理方法
-
arguments方式
一. 子组件抛出对象类型位置参数
这种方式必须要求可以更改子组件的实现, 让其$emit时传递对象类型参数, 把需要的多个参数打包成Array或者Object:
1
2
3
4
5
6
7
8
9
10
11
12
| <!-- 子组件 -->
<template>
<!-- 传递打包好的对象参数 -->
<button @event="$emit('event', {a: 'a', b: 'b', c: 'c'})"></button>
</template>
<!-- 当前组件 -->
<template>
<!-- 获取打包参数和固定的参数 -->
<component @event="handler($event, 1, 2)"/>
</template>
|
二. 代理方法
这种方式相当于绑定的是另一个方法, 将子组件抛出的多个位置参数通过代理方法合并到一个方法内, 然后增加传入闭包的固定值 1, 2
1
2
3
4
5
| <!-- 当前组件 -->
<template>
<!-- 解包参数并调用 -->
<component @event="(a, b, c) => handler(a, b, c, 1, 2)"/>
</template>
|
三. arguments方式
事件绑定 v-on:
1
2
3
4
| <!-- 当前组件 -->
<template>
<component @event="handler('arg', arguments[0], arguments[1])"/>
</template>
|
属性绑定 v-bind:
1
2
3
4
| <!-- 当前组件 -->
<template>
<component :event="handler('arg', arguments[0], arguments[1])"/>
</template>
|
