preface

Personal learning process records, easy to use for subsequent review, if there are mistakes or higher methods, hope to see the big guy pointed out

Component business logic reuse

There are three commonly used mixins, HOC(high-level components), and Renderless components

Mixins

Mixins are classes that can be easily inherited by a subclass or a group of subclasses for reuse purposes. Vue. Mixins can be registered globally, affecting all Vue instances, or mixins can be used in a single file :[xx]. Methods,components, and Directive are merged into one object, and if duplicate key names occur, the component’s keys are retained

Make a plug-in with mixin

As a simple plugin, calling $notify will pop up a window with information for the parameters passed in

Vue.use(plugin)

Vue.use(plugin)This code should be familiar. Vuex,elementUI, and so on all use this code to install plug-ins to use the functionality of these extensions in VUE

The following code is taken from VUe3, written in TS, and you can see that the plug-in you use needs to provide onePluginInstallFunctionFunction orinstallobjectSo the above plug-in is very simple, the following directly paste the code, and then introduce in main, JS, and then vue. use on the line, the effect is not demonstrated, interested can be transformed into a custom alert template

import Vue from "vue"; const methods = { $notify: function(template) { alert(template); }}; function install() { Vue.mixin({ methods }); } export default { install };Copy the code

disadvantages

It breaks the packaging of original components, increases the complexity of components, and may appear naming conflicts, and can only reuse logic, not template reuse

Renderless components

It is not recommended to use Hoc because of its deep nesting and high complexity, which makes it inconvenient to call. Therefore, it will not be introduced here. Therefore, it will introduce renderless component, which is commonly used in the Vue community, which can precipite reused logic into slot and expose interfaces by slot slot

slot

Sockets are not much to talk about, encapsulation components should also be used a lot, to talk about how to use child template data in the parent template, very simple, the following code demonstrates how to use

<slot :data="data" name="context"></slot> // Parent <template V-slot :context="{data}" >{{data.name}} </template>Copy the code

renderless

Let’s take an example of a regular check

Renderless components

<template>
  <div>
    <slot name="inputText" :validate="validate"></slot>
    {{ errMsg }}
  </div>
</template>
//methods
validate() {
  let validate = this.rules.reduce((pre, cur) => {
    let check = cur && cur.test && cur.test(this.value);
    this.errMsg = check ? "" : cur.message;
    return pre && check;
  }, true);
  return validate;
},
Copy the code

The parent component

<com-multiplexing :rules="rules" :value="num"> <template V-slot :inputText="{validate}"> <input type="text" v-model="num" @blur="validate" /> </template> </com-multiplexing> Data () {return {num: 1, rules: [{message: "please enter at least one number ", test(value) {return /\d+/.test(value);},},],}; },Copy the code

Multiplexing v-slot:inputText=”{validate}” >

reuse

If reuse is required, the rules and num variables can be replaced, and can be encapsulated again on this basis

    <com-multiplexing
      v-slot:inputText="{ validate }"
      :rules="rule"
      :value="text"
    >
      <input type="text" @blur="validate" v-model="text" />
    </com-multiplexing>
Copy the code

advantages

In accordance with the dependency inversion principle, templates can be reused without naming conflicts, and the source of reused interfaces is clear