Events within component slots

[rglodzinski]

I 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

[karol-f]

Hi, there's something with the formatting - I can't see your code. Anyway - each component, nested in slot, is separate Vue instance and won't communicate with other vue custom element (unless you will use props or some shared event bus or store).

[rglodzinski]

Hi, there's something with the formatting - I can't see your code. Anyway - each component, nested in slot, is separate Vue instance and won't communicate with other vue custom element (unless you will use props or some shared event bus or store).

Fix the formatting.

[karol-f]

Hi, conclusion is the same - my-btn won't pass events to my-item - these are separated Vue instances.

[rglodzinski]

Hi, conclusion is the same - my-btn won't pass events to my-item - these are separated Vue instances.

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

[karol-f]

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