[Vuejs]-Bind attribute to $slot using Single File Component syntax

by

0👍

I was able to hack my way through using $slots purely in the template.

It’s a hack because this implementation always assumes that the slot will only be one layer deep.

If someone else knows of a better way, please post the answer, as I’m such a Vue newb. Thank you!

<template>
  <p-button
    class="p-button-rounded"
    :icon="icon"
    :label="
      $slots.default &&
      $slots.default
        .map((node) => node.text)
        .join('')
        .trim(' ')
    "
    iconPos="right"
    v-on="$listeners"
  />
</template>

<script>
import Button from "primevue/button";
import VueTypes from "vue-types";

export default {
  name: "Button",
  components: { "p-button": Button },
  // inheritAttrs: false, // TODO: figure out what value this should be
  props: {
    type: VueTypes.oneOf(["primary", "secondary", "tertiary", "ghost"]).def(
      "primary"
    ),
    icon: VueTypes.oneOfType([String, null]),
  },
};
</script>

Leave a comment