title: Bind attribute to $slot using Single File Component syntax
body: <p>I want to do something very similar to <a href="https://stackoverflow.com/a/42956086/858275">this post</a>, where I want an attribute to bind to the default slot. However, I want to use <strong>single file component syntax</strong> instead of <code>Vue.component()</code>.</p>
  <p>In other words, how do I do the equivalent of accessing <code>this.$slots</code> ?</p>
  <pre><code>&lt;template&gt;
    &lt;p-button
      class=&quot;p-button-rounded&quot;
      :icon=&quot;icon&quot;
      v-on=&quot;$listeners&quot;
    /&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import Button from 'primevue/button';
  import VueTypes from 'vue-types';
  
  const getChildrenTextContent = (children) =&gt; children
    ?.map((node) =&gt; (node.children ? getChildrenTextContent(node.children) : node.text))
    .join('')
    .trim(' ');
  
  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]),
    },
  
    // inspired by https://stackoverflow.com/a/42956086/858275
    created() {
      const text = getChildrenTextContent(this.$slots.default); // (Obviously) doesn't work because `this` refers to the current object 
      this.$attrs.label = text;
      console.log(text);
    },
  };
  &lt;/script&gt;
  </code></pre>