How to write vue plug-in-JS Tutorial-php.cn

This time, the editor will teach you how to write a vue plug-in through a simple example, as well as what needs to be paid attention to. Readers who need it can follow along and learn.

Before learning, ask yourself why you want to write a vue plug-in.

In a project, especially a large project, there are many parts that need to be reused, such as loading animations and pop-up boxes. It is a little troublesome to reference one by one, and if there are too many components referenced in a vue file, the code will appear bloated, so there is a need to encapsulate the vue plug-in.

After talking about the requirements, let’s take a look at the specific implementation. At present, I have tried two different plug-in writing methods, and I will introduce them one by one.

This is my project directory. The general structure is explained like this, as simple as possible and easy to understand.

One is the loading plug-in and the other is the toast plug-in. The difference is that the loading plug-in is introduced as a component, while the toast plug-in is directly added to the mount point and called by changing the status of the method.

Currently used is Jiangzi:

toast plug-in

There are two files under the toast file, the file with the suffix vue is The skeleton of this plug-in, the first js file is to put this skeleton into the Vue global and write the operation logic.

You can take a look at the content of toast.vue:

<template>
 <transition name="fade">
  <p v-show="show">
   {{message}}
  </p>

 </transition>
</template>

<script>
export default {
 data() {
 return {
  show: false,
  message: ""
 };
 }
};
</script>

<style lang="scss" scoped>
.toast {
 position: fixed;
 top: 40%;
 left: 50%;
 margin-left: -15vw;
 padding: 2vw;
 width: 30vw;
 font-size: 4vw;
 color: #fff;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.8);
 border-radius: 5vw;
 z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
 transition: 0.3s ease-out;
}
.fade-enter {
 opacity: 0;
 transform: scale(1.2);
}
.fade-leave-to {
 opacity: 0;
 transform: scale(0.8);
}
</style>

Copy after login

There are only two main contents here, which determine whether to display show and what content to display message.

After a quick look here, do you find any problems?

There is no props attribute in this file, that is, whether it is show or message, there is no way to modify it through parent-child component communication. So how do they handle it correctly? Of. Don't worry, let's take a look at his configuration file.

index.js:

import ToastComponent from &#39;./toast.vue&#39;

const Toast = {};

// 注册Toast
Toast.install = function (Vue) {
 // 生成一个Vue的子类
 // 同时这个子类也就是组件
 const ToastConstructor = Vue.extend(ToastComponent)
 // 生成一个该子类的实例
 const instance = new ToastConstructor();

 // 将这个实例挂载在我创建的p上
 // 并将此p加入全局挂载点内部
 instance.$mount(document.createElement(&#39;p&#39;))
 document.body.appendChild(instance.$el)
 
 // 通过Vue的原型注册一个方法
 // 让所有实例共享这个方法 
 Vue.prototype.$toast = (msg, duration = 2000) => {
  instance.message = msg;
  instance.show = true;

  setTimeout(() => {
   
   instance.show = false;
  }, duration);
 }
}

export default Toast

Copy after login

The logic here can be roughly divided into the following steps:

Create an empty object, which is the name of the plug-in to be used in the future. In addition, there must be an install function in this object. Use vue's extend method to create a plug-in constructor (which can be seen as creating a subclass of vue), instantiate the subclass, and all subsequent operations can be completed through this subclass. Then add a shared method to the Vue prototype.

What needs to be mentioned here is Vue.extend(). For example, our daily use of vue to write components looks like this:

Vue.component(&#39;MyComponent&#39;,{
 template:&#39;<p>这是组件</p>&#39;
})

Copy after login

This is the registration method of global components, but in fact it is syntactic sugar. The real running process is like this:

let component = Vue.extend({
 template:&#39;<p>这是组件</p>&#39;
})

Vue.component(&#39;MyComponent&#39;,component)

Copy after login

Vue.extend will return an object. According to most information, it can also be said to return a subclass of Vue. Since it is a subclass, there is no way to directly use the methods on the Vue prototype through it, so A new instance is required for use.

In the code console.log(instance)

the result is this:

You can see $el: p.toast

is the root node of the toast component template.

What’s confusing is that I don’t know why I need to create an empty p node and mount this instance on it. I tried commenting this code, but when I run it I get an error.

Looking for the cause of this error, it seems to be because of the

instance.$el

problem in <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">document.body.appendChild(instance.$el)</pre><div class="contentsignin">Copy after login</div></div>, then okay, Let's take a look at this on the console. WTF! ! ! ! The result turned out to be undefined.

Then

console.log(instance)

Copy after login

Compare it with the previous picture, what do you find? Yes, $el disappeared. In other words, after I commented the sentence

instance.$mount(document.createElement(&#39;p&#39;))

Copy after login

, the mount point no longer existed. Then I tried to change this sentence:

instance.$mount(instance.$el)

Copy after login

$el magically came back... run. But in any case, this means that the instance must be mounted on a node for subsequent operations. The code after

is simple. It is nothing more than adding a method to change the plug-in state on the Vue prototype. Then export this object.

The next step is how to use it. Let’s take a look at how main.js is written:

import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
// import router from &#39;./router&#39;
import Toast from &#39;./components/taost&#39;
Vue.use(Toast)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({

 // router,
 render: h => h(App)
}).$mount(&#39;#app&#39;)

Copy after login

This way it can be used directly in other vue files, like this:

// app.vue
<template>
 <p id="app">
 <loading duration=&#39;2s&#39; :isshow=&#39;show&#39;></loading>
 <!-- <button @click="show = !show">显示/隐藏loading</button> -->
 <button @click="toast">显示taost弹出框</button>
 </p>
</template>

<script>
export default {
 name: "app",
 data() {
 return {
  show: false
 };
 },
 methods: {
 toast() {
  this.$toast("你好");
 }
 }
};
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Copy after login

By adding a method to methods to control the content written in $toast on the Vue prototype operates on the toast component.

In this way, the writing process of the toast component is over, and you can see the effect in the gif picture at the beginning.

loading plug-in

After the explanation of the previous plug-in, this part will not be so detailed. After all, most of them are no different. I will only point out the differences.

<template>
 <p class=&#39;wrapper&#39; v-if="isshow">
  <p class=&#39;loading&#39;>
   <img src="./loading.gif">
  </p>
 </p>
</template>

<script>
export default {
 props: {
 duration: {
  type: String,
  default: "1s" //默认1s
 },
 isshow: {
  type: Boolean,
  default: false
 }
 },
 data: function() {
 return {};
 }
};
</script>

<style lang="scss" scoped>

</style>

Copy after login

This is just a template, passing in the data of the two parent components to control the display effect.

Let’s take a look at the configuration file of the plug-in:

import LoadingComponent from &#39;./loading.vue&#39;

let Loading = {};

Loading.install = (Vue) => {
 Vue.component(&#39;loading&#39;, LoadingComponent)
}

export default Loading;

Copy after login

这个和taoat的插件相比，简单了很多，依然是一个空对象，里面有一个install方法，然后在全局注册了一个组件。

比较

那介绍了这两种不同的插件编写方法，貌似没有什么不一样啊，真的是这样么？

来看一下完整的main.js和app.vue这两个文件：

// main.js
import Vue from 'vue'
import App from './App'
// import router from './router'
import Toast from './components/taost'
import Loading from './components/loading'

Vue.use(Toast)

Vue.use(Loading)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({

 // router,
 render: h => h(App)
}).$mount('#app')

// app.vue
<template>
 <p id="app">
 <loading duration=&#39;2s&#39; :isshow=&#39;show&#39;></loading>
 <!-- <button @click="show = !show">显示/隐藏loading</button> -->
 <button @click="toast">显示taost弹出框</button>
 </p>
</template>

<script>
export default {
 name: "app",
 data() {
 return {
  show: false
 };
 },
 methods: {
 toast() {
  this.$toast("你好");
 }
 }
};
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Copy after login

可以看出来，loading是显示的写在app.vue模板里的，而toast并没有作为一个组件写入，仅仅是通过一个方法控制显示。

来看一下html结构和vue工具给出的结构：