温馨提示:本文翻译自stackoverflow.com，查看原文请点击：vue.js - How add click events to Vue slots?
jsx vue.js

vue.js - 如何将点击事件添加到Vue广告位？

发布于 2020-03-29 21:39:57

父元素：

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

插槽组件：

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

我需要添加一个click事件this.$slots.trigger以触​​发solt-div组件中的功能

但是此事件不能添加到外部DIV，因为还有其他插槽

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

查看更多

提问者
ebyte ebyte
被浏览
18
分享
Troy Kessler 2020-01-31 18:25

在尝试用Render函数添加事件后，createElement我来到了解决方案，您可以在其中使用引用来调用函数。solt-div

父母

<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
    }
  }
},

相关问题

1
我如何获取此Firebase数据以在循环外使用？
2
BackEndUrl未定义
3
以增加的间距在vuetify网格中将v-col的n个中心居中
4
组件已注册但尚未使用vue / no-unused-components
5
如何从组件将函数作为值分配给Vuex状态中的对象的属性？
6
从链接href和Vuetify v-btn下载Vue文件
7
在首次在vue应用程序中加载后，动态PixiJS画布会出错
8
如何使用本地存储中的数据初始化存储？
9
VueJ中的V模型和子组件
10
如何在Vue中具有绑定数据的DIV之间切换？

热门github

1
🤯 Lobe Chat - an open-source, modern-design AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Ollama / DeepSeek / Qwen), Knowledge Base (file upload / knowledge management / RAG ), Multi-Modals (Plugins/Artifacts) and Thinking. One-click FREE deployment of your private ChatGPT/ Claude / DeepSeek application. (翻译：LobeChat 是开源的高性能聊天机器人框架，支持语音合成、多模态、可扩展的（Function Call）插件系统。)
2
Collection of leaked system prompts
3
Jelly Evolution Simulator
4
Master programming by recreating your favorite technologies from scratch. (翻译：在这个项目中，你能学会如何创造自己的各种工具，引擎，游戏，框架，库......)
5
Agent S: an open agentic framework that uses computers like a human
6
An open source payments switch written in Rust to make payments fast, reliable and affordable (翻译：YOLOv8 🚀 in PyTorch > ONNX > CoreML > TFLite)
7
Python - 100天从新手到大师
8
Truly independent web browser
9
Curated list of project-based tutorials (翻译：收藏了基于项目的教程列表)
10
21 Lessons, Get Started Building with Generative AI 🔗 https://microsoft.github.io/generative-ai-for-beginners/ (翻译：12 节课程，开始使用生成式 AI 进行构建)
11
ChatGPT DAN, Jailbreaks prompt
12
A quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage
13
real time face swap and one-click video deepfake with only a single image