render形式tree組件怎么優(yōu)雅的綁定點(diǎn)擊事件？

iview中render形式tree組件怎么優(yōu)雅的綁定點(diǎn)擊事件？

工作需要使用到自定義的tree組件，使用的是iview組件，但是使用render之后就只能將click事件寫(xiě)在render函數(shù)中，這樣以來(lái)render函數(shù)中就會(huì)出現(xiàn)多個(gè)click事件，顯得代碼冗余，不優(yōu)雅，請(qǐng)問(wèn)有什么別的方式書(shū)寫(xiě)？

相關(guān)代碼

<template>
  <div class="fss-tree" @click="clickHandler">
    <Tree :data="treeData" :render="renderContent" ref="reference"></Tree>
  </div>
</template>

<script>
import { Menu, Tree } from 'iview'
export default {
  name: 'fss-tree',
  components: {
    Menu,
    Tree
  },
  data() {
    return {
      treeData: [
        {
          title: 'parent 1',
          expand: true,
          render: (h, { root, node, data }) => {
            return h(
              'span',
              {
                style: {
                  display: 'inline-block',
                  width: '50%'
                },
                on: {
                  click() {
                    // console.log(`root: ${JSON.stringify(root)}`)
                    // console.log(`node: ${JSON.stringify(node)}`)
                    // console.log(`data: ${JSON.stringify(data)}`)
                    // data.expand = !data.expand
                  }
                }
              },
              [
                h('span', [
                  h('Icon', {
                    props: {
                      type: 'ios-folder-outline'
                    },
                    style: {
                      marginRight: '8px'
                    }
                  }),
                  h('span', data.title)
                ])
              ]
            )
          },
          children: [
            {
              title: 'child 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                  expand: true
                },
                {
                  title: 'leaf 1-1-2',
                  expand: true
                }
              ]
            },
            {
              title: 'child 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                  expand: true
                },
                {
                  title: 'leaf 1-2-1',
                  expand: true
                }
              ]
            }
          ]
        }
      ],
      buttonProps: {
        type: 'ghost',
        size: 'small'
      }
    }
  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h('span',
        {
          style: {
            display: 'inline-block',
            width: '60%'
          }
        },
        [
          h('span', [
            h('Icon', {
              props: {
                type: data.title.includes('child') ? 'ios-folder-outline' : 'ios-paper-outline'
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span', data.title)
          ])
        ]
      )
    },
    clickHandler() {
      console.log(this.$refs.reference)
    }
  }
}
</script>