自定义插件

1、自定义插件vue-demoPlugin.js

(function (window) {
  const DemoPlugin = {}
  DemoPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.demoGlobalMethod = function () {
      console.log('Vue函数对象的demoGlobalMethod()')
    }

    // 2. 添加全局资源,这里添加了个全局指令
    Vue.directive('demo-directive', function (el, binding) {
      el.textContent = 'demo-directive----' + binding.value
    })

    // 4. 添加实例方法
    Vue.prototype.$demoMethod = function () {
      console.log('vm $demoMethod()')
    }
  }
  //向外暴露插件
  window.MyDemoPlugin = DemoPlugin
})(window)

2、使用自定义插件

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自定义插件</title>
</head>

<body>
    <div id="app">
        <button @click="clickFunc">按钮</button>
        <!-- 使用自定义插件的全局指令demo-directive -->
        <p v-demo-directive="msg"></p>
    </div>
    <script src="../js/vue.js" type="text/javascript"></script>
    <!-- 自定义插必须在vue.js后面引入 -->
    <script src="../js/vue-demoPlugin.js" type="text/javascript"></script>
    <script>
        // 声明使用自定义插件
        // 内部会执行DemoPlugin.install方法
        Vue.use(MyDemoPlugin);
        //调用自定义插件的全局方法
        Vue.demoGlobalMethod();
        const vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello My Name Is HeHe"
            },
            methods: {
                clickFunc() {
                    //通过this调用Vue的实例方法
                    this.$demoMethod();
                }
            }
        });
        //调用Vue的实例方法
        vm.$demoMethod();
    </script>
</body>

</html>

 

posted @ 2020-03-14 17:36  牛牛的自留地  阅读(262)  评论(0)  编辑  收藏  举报