[Vuejs]-How to show data from component in slot?

by

0👍

✅

You can pass data to slot and use it when it get replaced by parent

I am not familiar with pug templates so writing in normal template, hope you able to convert it.

So you will pass your data to slot and when you consume it you just receive it

<template lang="pug">
.div
  <slot :data="{ sizeblock, activetab}" />
</template>

<script>
export default {
 name: "mycomponent",
 data() {
  return {
    sizeblock: 0,
    activetab: 3
  }
 }
}
</script>

mycomponent.div
 <template v-slot:default="{data}">
     nav(:style="{'min-height': data.sizeblock+'px'}")
    button(:class="{'active': data.activetab == index") 1
    button(:class="{'active': data.activetab == index") 2
    button(:class="{'active': data.activetab == index") 3
  </template>

Leave a comment