On gists

Renderless component approach by Adam Wathan

Vue.js

LinkList.vue Raw #

<!--
Url: https://adamwathan.me/renderless-components-in-vuejs/

Jeho pristup je predavani atributu a eventu jako cely objekt, moje je  :bookmarkNow a prijde mi to lepsi teda ... ale ukladam.

-->

<script setup>
const props = defineProps({
  links: {
    type: Array,
    required: true
  }
})

const bookmark = (link) => {
  link.bookmarked = !link.bookmarked;
}
</script>

<template>
  <slot 
    v-for="(link, index) in links" 
    :key="link.id"
    :link="link"
    :bookmarkNow="() => bookmark(link)"
    :bookmarkButtonAttrs="{
      style: link.bookmarked ? 'font-weight: bold;' : ''
    }"
    :bookmarkButtonEvents="{
      click: () => bookmark(link)
    }"
  />
</template>

App.vue Raw #

<script setup>
  import { reactive } from 'vue'
  import LinkList from "./LinkList.vue"

  const links = reactive([
  {
    id: 1,
    name: "AA",
    bookmarked: false,
  },
  {
    id: 2,
    name: "BB",
    bookmarked: false,
  }
  ])
</script>

<template>
  <LinkList :links="links" v-slot="{ link,  bookmarkButtonAttrs, bookmarkButtonEvents, bookmarkNow }">
    <button 
    v-bind="bookmarkButtonAttrs"
    @mouseover="bookmarkNow()"
    v-on="bookmarkButtonEvents"
    >{{ link.name }}</button> 
    |
  </LinkList>
</template>