Как добавить события кликов в Vue слотов?

Question

Родительский элемент:

<solt-div>
  <button slot="trigger">选取文件</button>
</solt-div>

Компонент слота:

export default {
  render () {
      return(<div>{this.$slots.trigger}</div>)
  }
}

Мне нужно добавить событие щелчка к this.$slots.trigger, чтобы вызвать функцию в solt-div component

Но это событие не может быть добавлено во внешний DIV, потому что есть другие слоты

<trigger @click="fn"></trigger>

Answer 1

После некоторой попытки добавить событие в функцию рендеринга с помощью createElement я пришел к решению, где вы можете использовать ссылку для вызова своей функции в solt-div

Parent

<solt-div ref="soltDiv">
    <button slot="trigger" @click="$refs.soltDiv.fn()">test</button>
</solt-div>

solt-div

export default {
  render () {
      return(<div>{this.$slots.trigger}</div>)
  },
  methods: {
    fn() {
      // do stuff
    }
  }
},