vue自定义插件教程+案例封装一个数字跳动盒子 实现实时跳动

---

前言

如果你想将某种好用的功能从页面中抽离出来，以便在其他项目中复用，自定义插件是个好办法，这里以vue2 + js为例，从0开始封装一个数字跳动插件，由于CountUp.js必须要给dom绑定一个id，用起来很不方便，所以手动撸了一个。最终实现效果如下

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建插件目录结构

首先在src目录下创建plugins文件夹，然后新建插件目录

创建index.js为主入口文件，Count.js为内容文件

二、入口文件

1.引入内容并暴露出去

代码如下（示例）：

import Count from './Count'

export default Count

2.为Count添加install方法

代码如下（示例）：

import Count from './Count'

Count.install = (app) => {
   
  app.component(Count.name, Count)
}

export default Count

由于Count实际上是一个对象，当插件是一个对象时，必须提供install方法，如果插件是一个函数，则该函数会被视为install。install会在vue.use()的时候被调用，并将Vue作为参数传入，此处用app接收

component方法是Vue自带的注册组件的方法。该方法接收两个参数，第一个参数是组件名称，第二个参数是组件的实现

二、内容文件

/**
 * @description: 数字跳动组件
 * @author: 白侯老哥
 * @create: 2022-9-1
 */
export default {
   
    name: 'Count',
    // props用于接收传递进组件的参数
    props: {
   
        // 需要监听的数字，由组件外部传入
        num: {
   
            type: Number,
            default: 0
        },
    },
    data () {
   
        return {