Advanced Vue component pattern (3)

03 Use mixin To enhance Vue Components

The goal is

In the previous article , Although we will toggle Components are divided into toggle-button、toggle-on and toggle-off Three sub components , And everything works well , But there are some problems in it ：

• toggle The internal state and method of a component can only be shared with these three subcomponents , We expect that third-party components can also share these States and methods
• inject We wrote the injection logic three times , If you can , We would prefer to declare only once （DRY principle ）
• inject The injection logic of is currently hard coded , In some cases , We may expect dynamic configuration

If you are familiar with react The reader here may immediately think of HOC（ High order component ） The concept of , And it's also react One of the most common patterns , This mode can improve react The degree of reuse and flexibility of components . stay vue in , Do we also have some means or features to improve the reusability and flexibility of components ？ The answer, of course, is yes , That's it mixin.

Realization

About mixin Own knowledge , I won't go over it here , Unfamiliar readers can go to official documents to understand . We have made a declaration called toggleMixin Of mixin To pull out the public injection logic , as follows ：

export const withToggleMixin = {
  inject: {
    toggleComp: "toggleComp"
  }
};

after , Whenever you need to inject toggle When a component provides a dependency , Just blend into the present mixin, as follows :

mixins: [withToggleMixin]

If the logic of Injection , Let's add some flexibility , For example, you want to freely declare that you want to inject dependencies key when , We can borrow from HOC The concept of , Declare a higher order mixin（ Can be abbreviated HOM ?? A skin , Very happy ）, as follows ：

export function withToggle(parentCompName = "toggleComp") {
  return {
    inject: {
      [parentCompName]: "toggleComp"
    }
  };
}

This HOC mixin It can be used as follows ：

mixins: [withToggle("toggle")]

So in the current component , call toggle Component related states and methods , It is no longer this.toggleComp, It is this.toggle.

results

By implementing toggleMixin, We managed to pull the logic out of the injection , So every time you need to share toggle When the state and method of the component , Mix in the mixin that will do . This solves the problem that third-party components cannot share their states and methods , In the online instance code , I implemented two third-party components , Namely custom-button and custom-status-indicator, The former is a custom switch , Use withToggleMixin To mix in the injection logic , The latter is a custom status indicator , Use withToggle Higher order functions to mix in injection logic .

You can see the implementation code and demonstration of this component in the following link ：

• sandbox: The online demo
• github: part-3

summary

mixin As a distribution Vue A very flexible way to reuse functions in components , It can be used in many scenes , Especially in some components dealing with public logic , For example, notice 、 Form error prompt, etc , This mode is especially useful .

Catalog

github gist Click preview

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .