Skip to content

Scoped slots #15

Description

@lbineau

Thank you for this proof of concept repository.
I have a question rather than an issue.
Currently I'm using scoped slots to achieve a similar result but allowing some part of component template to come from the backend (ex: carousel items content) and be able to trigger some actions and data-binding on this slot.

<!-- template coming from carousel.html -->
<div data-vue-app="CarouselCmp">
  <carousel v-slot:default="spCarousel">
    <li v-on:click="spCarousel.onItemClicked">carousel item 1</li>
    <li>carousel item 2</li>
    <li>carousel item 3</li>
  </carousel>
</div>
<script>
// carousel.vue
export {
  // ...
  methods: {
    onItemClicked () {alert('click')}
  }
}
</script>
<template>
  <slot :onItemClicked="onItemClicked" />
</template>
// main.js
// JS code to initialize all elements with "data-vue-app" with createApp()

Do you see any way to have the template of the component produced by the backend with your approach?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions