title: Extending Vue.js SFC components
body: <p>I haven't found a good resource on extending Vue.js components. In every project I've worked on, regardless of the UI component library that's used, there are application Base components which extend the UI library components to enforce company/application defaults and standards.</p>
  
  <p>I'm trying to extend Vue-Multiselect: <a href="https://vue-multiselect.js.org/" rel="nofollow noreferrer">https://vue-multiselect.js.org/</a> which has about 30 props and 12 slots. The component I'm extending doesn't matter -- I only mention it because ideally I don't want to have to repeat 30 props and 12 slots in my implementation.</p>
  
  <p>I simply want to make two changes to the behavior of the component:</p>
  
  <p><strong>Make <code>disabled</code> prop a bit smarter</strong></p>
  
  <p>The Vue-Multiselect component has a standard <code>disabled</code> prop which works as expected:</p>
  
  <pre><code>&lt;Multiselect :disabled="isDisabled" ...&gt;
  </code></pre>
  
  <p>In our application, we have global state in Vuex which determines if the application is read-only. What I want to avoid is requiring developers to pass this state to every form field:</p>
  
  <pre><code>&lt;Multiselect :disabled="readOnly || isDisabled" ...&gt;
  &lt;OtherComponent :disabled="readOnly || someOtherCondition" ...&gt;
  ...
  </code></pre>
  
  <p>So the user of my base component should only need to be concerned about their local UI state which affect the disabled status:</p>
  
  <pre><code>&lt;BaseCombo :disabled="!emailValid" ...&gt;
  </code></pre>
  
  <p>This would handle the 90% case of form fields that are locked down when the application is read-only and I can use an additional prop for cases where we want to ignore the global read-only status.</p>
  
  <pre><code>&lt;BaseCombo :disabled="!emailValid" :ignoreReadOnly="true" ...&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Provide defaults</strong></p>
  
  <p>Secondly, I simply want to override some of the default prop values. This post addresses the question of supplying defaults:</p>
  
  <p><a href="https://stackoverflow.com/a/52592047/695318">https://stackoverflow.com/a/52592047/695318</a></p>
  
  <p>And this works perfectly until I tried to modify the behavior of the disabled prop I mentioned previously.</p>
  
  <hr>
  
  <p>My attempt to solve this was to either wrap or extend the component. I'd really want to avoid redeclaring all of the props if possible.</p>
  
  <pre><code>&lt;template&gt;
    &lt;Multiselect
      :disabled="myCustomDisabled"
      :value="value"
      @input="$emit('input', $event)"
      :options="options"
      :label="label"
      :track-by="trackBy"
      :placeholder="placeholder"
      ... repeat for all 30 options
  
  &lt;script&gt;
  import Multiselect from 'vue-multiselect'
  
  export default {
    name: "BaseCombo",
    extends: Multiselect, // extend or simply wrap?
    computed: {
      myCustomDisabled() {
        this.props.disabled || ... use disabled from Vuex state
      }
    },
    props: {
      disabled: Boolean,
      placeholder: {
        type: String,
        default: 'My Default Value',
      },
    ... repeat for all props
  </code></pre>
  
  <p>The problem I ran into is I don't know how to handle the <em>slots</em>. The user of this BaseCombo should still be able to use all 12 slots in the VueMultiselect component.</p>
  
  <p>Is there a better solution for extending components?</p>