Detailed explanation of Vue component reuse and expansion

Overview

An important principle in software programming is DRY (Don't Repeat Yourself), which is about reusing code and logic as much as possible to reduce duplication. Component extensions can avoid duplication of code and make it easier to develop and maintain quickly. So, what's the best way to extend a Vue component?

Vue provides a number of APIs and patterns to support component reuse and extension. You can choose according to your purpose and preference.

This article introduces several common methods and patterns, I hope it will be helpful to you.

Is the extension necessary?

Be aware that all component extension methods add complexity, extra code, and sometimes increased performance overhead.

Therefore, before deciding to extend a component, it is best to see if there are other simpler design patterns that can accomplish your goals.

The following component design patterns are usually sufficient to replace extension components:

• Props with template logic
• slot
• JavaScript utility functions

Props with template logic

The simplest way is to use props combined with template conditional rendering to achieve component multi-functionality.

For example, through the type attribute:
MyVersatileComponent.vue

<template>
  <div class="wrapper">
    <div v-if="type === 'a'">...</div>
    <div v-else-if="type === 'b'">...</div>
    <!--etc etc-->
  </div>
</template>
<script>
export default {
  props: { type: String },
  ...
}
</script>

When using a component, passing different type values ​​can achieve different results.

// *ParentComponent.vue*
<template>
  <MyVersatileComponent type="a" />
  <MyVersatileComponent type="b" />
</template>

If the following two situations occur, it means that this mode is not applicable or is used incorrectly:

• The component composition pattern breaks down state and logic into atomic parts, making the application scalable. If there are a lot of conditional judgments in the component, readability and maintainability will be poor.
• The original intention of props and template logic is to make components dynamic, but there is also runtime resource consumption. If you use this mechanism to solve code composition problems at runtime, it is an anti-pattern.

slot

Another way to avoid component extensions is to use slots, which allows the parent component to set custom content in the child component.

// *MyVersatileComponent.vue*
<template>
  <div class="wrapper">
    <h3>Common markup</div>
    <slot />
  </div>
</template>

// *ParentComponent.vue*
<template>
  <MyVersatileComponent>
    <h4>Inserting into the slot</h4>
  </MyVersatileComponent>
</template>

Rendering result:

<div class="wrapper">
  <h3>Common markup</div>
  <h4>Inserting into the slot</h4>
</div>

One potential constraint of this pattern is that elements within the slot are subordinate to the context of the parent component, which may not be natural when splitting logic and state. Scoped slots are more flexible and will be mentioned later in the renderless components section.

JavaScript utility functions

If you only need to reuse independent functions between components, then you only need to extract these JavaScript modules and there is no need to use the component extension mode at all.

JavaScript's module system is a very flexible and robust way to share code, so you should rely on it whenever possible.
MyUtilityFunction.js

export default function () {
  ...
}

MyComponent.vue

import MyUtilityFunction from "./MyUtilityFunction";
export default {
  methods: {
    MyUtilityFunction
  }
}

Several modes of extension components

If you have considered the above simple modes, but these modes are not flexible enough to meet your needs. Then you can consider expanding the components.

There are four most popular ways to extend Vue components:

• Composition Function
• Mixins
• Higher-Order Components (HOCs)
• No render component

Each method has its advantages and disadvantages, and each method is more or less applicable depending on the usage scenario.

Composition API

The latest approach to sharing state and logic between components is the Composition API. This is an API introduced in Vue 3 and can also be used as a plugin in Vue 2.

Unlike the previous way of declaring data, computed, methods and other properties in the component definition configuration object, the Composition API declares and returns these configurations through a setup function.

For example, declaring a Counter component using Vue 2 configuration properties looks like this:
Counter.vue

<template>
  <button @click="increment">
    Count is: {{ count }}, double is: {{ double }}
  </button>
<template>
<script>
export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    double () {
      return this.count * 2;
    }
  }
}
</script>

Refactoring this component using the Composition API has exactly the same functionality:
Counter.vue

<template><!--as above--><template>
<script>
import { reactive, computed } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    });

    function increment() {
      state.count++
    }

    return {
      count,
      double,
      increment
    }
  }
}
</script>

One of the main benefits of declaring components with the Composition API is that logic reuse and extraction becomes very easy.

Let’s refactor further and move the counter functionality to the JavaScript module useCounter.js:
useCounter.js

import { reactive, computed } from "vue";

export default function {
  const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
  });

  function increment() {
    state.count++
  }

  return {
    count,
    double,
    increment
  }
}

Now, the counter functionality can be seamlessly introduced into any Vue component through the setup function:
MyComponent.vue

<template><!--as above--></template>
<script>
import useCounter from "./useCounter";

export default {
  setup() {
    const { count, double, increment } = useCounter();
    return {
      count,
      double,
      increment
    }
  }
}
</script>

Composition functions make functions modular and reusable, and are the most direct and low-cost way to extend components.

Disadvantages of the Composition API

The downsides of the Composition API aren't really that great - it might just look a bit verbose, and the new idioms might be unfamiliar to some Vue developers.

For a discussion of the pros and cons of the Composition API, please read: When To Use The New Vue Composition API (And When Not To)

Mixins

If you are still using Vue 2, or just like to define component functions as configuration objects, you can use the mixin mode. Mixins extract common logic and state into separate objects and merge them with the objects defined inside the components that use the mixin.

We continue with the previous Counter component example and put the common logic and state into the CounterMixin.js module.
CounterMixin.js

export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    double () {
      return this.count * 2;
    }
  }
}

Using mixins is also very simple, just import the corresponding module and add the variables to the mixins array. When the component is initialized, the mixin object is merged with the object defined inside the component.
MyComponent.vue

import CounterMixin from "./CounterMixin";

export default {
  mixins: [CounterMixin],
  methods: {
    decrement() {
      this.count--;
    }
  }
}

Option merging

What if the options in the component conflict with the mixin?

For example, if you define a built-in increment method for a component, which one has a higher priority?
MyComponent.vue

import CounterMixin from "./CounterMixin";

export default {
  mixins: [CounterMixin],
  methods: {
    // Will the native `increment`` method override the mixin's `increment`?
    increment() { ... }
  }
}

At this time, we need to talk about Vue's merging strategy. Vue has a set of rules that determine how to handle options with the same name.

Usually, component options will override options from a mixin. But there are exceptions. For example, lifecycle hooks of the same type are not directly overwritten, but are put into an array and executed in sequence.

You can also change the default behavior by defining a custom merge strategy.

Disadvantages of mixins

As a pattern for extending components, mixin works well for simple scenarios, but problems arise once the scale expands. Not only do you need to pay attention to naming conflicts (especially for third-party mixins), but when using components with multiple mixins, it is difficult to figure out where a certain function comes from, and it is also difficult to locate the problem.

Higher-order components

Higher-order components (HOC) are a concept borrowed from React and can also be used in Vue.

To understand this concept, let's move away from components and look at two simple JavaScript functions, increment and double.

function increment(x) {
  return x++;
}

function double(x) {
  return x * 2;
}

Suppose we want to add a feature to both functions: output the results in the console.

To do this, we can use the higher-order function pattern and create a new addLogging function that accepts a function as a parameter and returns a function with the added functionality.

function addLogging(fn) {
  return function(x) {
    const result = fn(x);
    console.log("The result is: ", result);
    return result;
  };
}

const incrementWithLogging = addLogging(increment);
const doubleWithLogging = addLogging(double);

How can components take advantage of this pattern? Similarly, we create a higher-order component to render the Counter component and add a decrement method as an instance property.

The actual code is more complicated, so here we only give pseudo code as an illustration:

import Counter from "./Counter";

// Pseudocode const CounterWithDecrement => ({
  render(createElement) {
    const options = {
      decrement() {
        this.count--;
      }
    }
    return createElement(Counter, options);
  }
});

The HOC mode is simpler and more extensible than mixin, but at the cost of adding a wrapper component, which also requires skills to implement.

No render component

If you need to use the same logic and state on multiple components, but just display them differently, then you can consider the renderless component pattern.

This pattern requires two types of components: logic components are used to declare logic and state, and presentation components are used to display data.

Logic Components

Let’s go back to the Counter example. Suppose we need to reuse this component in multiple places, but display it differently.

Create a CounterRenderless.js to define a logical component, including logic and state, but without a template. Instead, declare a scoped slot through the render function.

The scoped slot exposes three properties to the parent component: the state count, the method increment and the computed property double.
CounterRenderless.js

export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    double () {
      return this.count * 2;
    }
  },
  render() {
    return this.$scopedSlots.default({
      count: this.count,
      double: this.double,
      increment: this.toggleState,
    })
  }
}

The scoped slot here is the key to the logic component in this pattern.

Presentational Components

Next is the display component , which, as the user of the renderless component, provides a specific display method.

All element tags are contained in scoped slots. As you can see, these properties are used just like the template is placed directly in the logic component.
CounterWithButton.vue

<template>
  <counter-renderless slot-scope="{ count, double, increment }">
    <div>Count is: {{ count }}</div> 
    <div>Double is: {{ double }}</div>
    <button @click="increment">Increment</button>
  </counter-renderless>
</template>
<script>
import CounterRenderless from "./CountRenderless";
export default {
  components:
    CounterRenderless
  }
}
</script>

The renderless component pattern is very flexible and easy to understand. However, it is not as general as the previous methods and may only have one application scenario, which is to develop component libraries.

Template extension

Both the above API and design pattern have a limitation, which is that the component template cannot be expanded. Vue has ways to reuse logic and state, but it is powerless when it comes to template tags.

There is a more hacky way, which is to use an HTML preprocessor, such as Pug, to handle template expansion.

The first step is to create a base template .pug file that contains common page elements. Also include a block input as a placeholder for the template expansion.

BaseTemplate.pug

div.wrapper
  h3 {{ myCommonProp }} <!--common markup-->
  block input <!--extended markup outlet -->

In order to extend this template, you need to install the Pug plugin for Vue Loader. Then you can import the base template and replace the placeholder using the block input syntax:
MyComponent.vue

<template lang="pug">
  extends BaseTemplate.pug
  block input
    h4 {{ myLocalProp }} <!--gets included in the base template-->
</template>

At first you might think it is the same concept as slot, but there is a difference, the base template here does not belong to any individual component. It is merged with the current component at compile time, rather than replaced at runtime like slots.

The above is a detailed explanation of the reuse and expansion of Vue components. For more information on the reuse and expansion of Vue components, please pay attention to other related articles on 123WORDPRESS.COM!