feat(runtime-core): support templateRef added event handler

[IndexXuan]

Support:

<template>
  <div class="container">
    <el-button ref="buttonRef">click me<el-button>
  </div>
<template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const buttonRef = ref()
    onMounted(() => {
      buttonRef.value.onClick = () => alert(`element-ui component emitted click')
      // in 2.0 we can use $on
      // buttonRef.value.$on('click', xxx)
      // even custom-event
      // buttonRef.value.onCustomEvent = () => alert('handle component emitted custom event')
    })
    return { buttonRef }
  }
}
</script>

[IndexXuan]

repro repo:
https://github.com/IndexXuan/vue3-template-ref-added-handlers/blob/master/src/App.vue#L23

[IndexXuan]

@posva please review it, we need it a lot for our code design. Thank you

[yyx990803]

This type of direct manipulation of a child ref is discouraged. I also don't see why you can't just pass the click handler via the template.

[IndexXuan]

@yyx990803 @posva
our Lowcode tools uses templateRef to bind Model and UI, we don't use template@click directly.
also, rxjs use fromEvent https://github.com/antfu/vueuse/tree/master/packages/rxjs, while these only support native button element, prevent all vue UI librarys. sad.

We need these to implement useEventListener and useFromEvent, Thanks a lot.