如何从插槽组件向父组件调用方法或发出事件？

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何从插槽组件向父组件调用方法或发出事件？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

开发过程中遇到如何从插槽组件向父组件调用方法或发出事件？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何从插槽组件向父组件调用方法或发出事件？的解决方法建议，希望对你解决如何从插槽组件向父组件调用方法或发出事件？有所启发或帮助；

这是我的模板

<template>
  <some-component>
    <button>Hello!</button>
  </some-component>
</template>

这是我的组件（some-component）

<template>
  <slot />
</template>

<script>
export default {
  methods: {
    someMethod() {
      // Does something
    }
  }
}
</script>

我将如何从插入组件的按钮调用 someMethod()，或者以其他方式发出 some-component 可以侦听的事件，以从插入的按钮运行方法本身?

您可以将 someMethod 作为 some-component 的插槽道具传递：

<template>
  <slot :onClick="someMethod" />
</template>

然后使用 some-component 的父级可以将 slot 属性绑定到 button：

<some-component>
  <template v-slot="{ onClick }">
    <button @click="onClick">Click me</button>
  </template>
</some-component>

demo

大佬总结

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

猜你在找的程序问答相关文章