Vue 事件参数传递

发表于 分类于 评论数： 本文字数： 964 阅读时长 ≈ 2 分钟

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