Vue 事件参数传递

1. 问题

components

组件内部抛一个事件

1
2
3
onChange (value) {
this.$emit('OnChange', value)
}

Page

外部使用时监听,并且执行一个回调

1.1 什么都不传

1
2
3
4
5
6
7
8
<tag @onChange="log"></tag>
<script>
methods: {
log (value) {
console.log(value)
}
}
</script>

返回

1
value

1.2 传字符串

1
2
3
4
5
6
7
8
<tag @onChange="log('change')"></tag>
<script>
methods: {
log (value) {
console.log(value)
}
}
</script>

返回

1
'change'

2. 期望达到的效果

既返回原始value,也返回字符串

1
'change' + value

3. 权宜之计

模板式写法无法做到,只能这样写

1
2
3
4
5
6
7
8
<tag @onChange="log"></tag>
<script>
methods: {
log (value) {
console.log ('change' + value)
}
}
</script>

使用函数式组件也许可以,还没有尝试

4. 换种方法

把onChange本身传递的value作为函数的参数向下传递

1
2
3
4
5
6
7
8
<tag @onChange="(value) => log('change'+value)"></tag>
<script>
methods: {
log (value) {
console.log (value)
}
}
</script>

返回

1
'change' + value