Events within component slots
See original GitHub issueI have two components: “my-btn” and “my-item”.
my-btn
<template>
<button class="br-btn" v-on="$listeners" v-bind="$attrs">
<slot>{{ label }}</slot>
</button>
</template>
<script>
export default {
name: "MyBtn",
props: ["label"]
};
</script>
my-item
<template>
<div class="item">
<slot />
</div>
</template>
<script>
export default {
name: "MyItem"
};
</script>
Build using this script defined in my package.json: “build:wc-custom-element”: “vue-cli-service build --target lib --inline-vue --name dsgov src/main-custom-element.js”.
So I use the components in a React application.
I purposely defined in “my-btn”, v-on=“$listeners”, to allow the component’s internal button events to be passed to the web component.
I can capture “my-btn” events perfectly, with one exception: when “my-btn” is rendered as a child of “my-item”.
This works
import React from "react";
const TodoList = () => {
const handleClick = () => {
alert("Button clicked");
};
return (
<div>
<my-btn onClick={handleClick}>Click me</my-btn>
</div>
);
};
export default TodoList;
This doesn’t work
import React from "react";
const TodoList = () => {
const handleClick = () => {
alert("Button clicked");
};
return (
<my-item>
<my-btn onClick={handleClick}>Click me</my-btn>
</my-item>
);
};
export default TodoList;
Tks
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
vue.js - Emit event from content in slot to parent - Stack Overflow
Slots are compiled against the parent component scope, therefore events you emit from the slot will only be received by the component the ......
Read more >Is it possible to emit event from component inside slot #4332
Yes, you have to maintain the binding of the event handler and the event trigger in the topmost parent component, but what's important...
Read more >Listen on events when using slots - Get Help - Vue Forum
I don't think it is possible to listen to events on slots. However, you can listen in the child component and just emit...
Read more >How to Emit Data from a Slot - Michael Thiessen
You pass a method into our slot and then call that method in the slot. You can't emit an event, because slots share...
Read more >HTMLSlotElement: slotchange event - Web APIs | MDN
The slotchange event is fired on an HTMLSlotElement instance ( <slot> element) when the node(s) contained in that slot change.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You can import js file with sth like this - https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/
Regards
Okay, thanks for the quick reply. Can you indicate where to see an example of how to implement the solution via props or with a shared event bus? Tks