vue 自定义插件

https://www.cnblogs.com/shenjianping/p/11315839.html

1、插件的作用

  • 插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等
  • Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
  • 通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.

2、开发插件并且使用

在项目目录下创建plugins.js文件，用于写入插件内容

复制代码
(function () {

  const MyPlugin = {} //声明一个插件对象

  MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      alert("添加全局方法或属性")
    }

    // 2. 添加全局资源
    Vue.directive('my-directive', {
      inserted: function (el, binding) {
        el.innerHTML = binding.value
      }
    })

    // 3. 注入组件选项
    Vue.mixin({
      created: function () {
        // 逻辑...
      }
    })

    // 4. 添加实例方法，可以传参
    Vue.prototype.$myMethod = function () {
      alert('添加实例方法')
    }

  }
  // 将插件添加到 window 对象中
  window.MyPlugin = MyPlugin

})()
复制代码

在index.html中进行引入，并且使用：

  • 引入文件
<script src="./plugins.js"></script>
  • 通过全局方法 Vue.use() 使用插件
Vue.use(MyPlugin)
  • 使用
复制代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-my-directive="msg"></button> <!--使用指令-->
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./plugins.js"></script>

<script>

  Vue.use(MyPlugin)

  var vm = new Vue(
    {
      el: '#app',
      data: {
        msg: 'hello'
      },
      // 在 `methods` 对象中定义方法
      methods: {
      }
    }
  )
  //调用自定义的全局方法,Vue 调用
  Vue.myGlobalMethod()
  // 调用 Vue 实例方法，vm实例调用
  vm.$myMethod()

</script>

</body>
</html>
复制代码

posted on 2021-09-15 10:56  左侧岚  阅读(112)  评论(0)    收藏  举报

导航