vue如何给slot绑定子组件里的事件?

Question

<my-component>
  <div slot="body">
    <span @click="">加事件</span>
   </div>
</my-component>

事件已经写好在my-component里面了
怎么加给span

场景:两个组件逻辑一模一样旧是样式和交互不一样
我在react是用高阶组件,vue搞不懂怎么加

Answer 1

简单啊，用 slot-scoped 啊，比如按下面的方式导出，并提供默认子组件：

<div class="logout-button">
        <slot :logout="logout">
            <button type="button" class="btn btn-primary" @click="logout()">Log out</button>
        </slot>
</div>

再按下面引用：

<logout-button>
    <template scope="{ logout }">
        <my-button @click="logout()">Sign out</my-button>
    </template>
</logout-button>

Answer 2

vue父组件调用子组件的方法
Vue 子组件调用父组件方法总结

Answer 3

写在my-component的事件，应该是在

<my-component @click=""></my-component>

Answer 4

无渲染组件 了解一下
针对的就是你提到的逻辑类似 渲染样式不同的情况