Vue3全局指令

最新推荐文章于 2025-06-13 09:45:41 发布

原创最新推荐文章于 2025-06-13 09:45:41 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue2的全局指令形式

      Vue.directive('指令',{
         inserted(el,binding){
            // el: 绑定了指令的dom元素
            // binding: value代表指令绑定表达式的值
         }
      })
      在new Vue()之前

vue3的全局指令形式

  const app = createApp({})
      app.directive('指令名称',{
         mounted(el,binding){
           // el: 绑定了指令的dom元素
           // binding: value代表指令绑定表达式的值
         }
      })

基于vue-cli工程化环境下定义Vue3的全局指令

vue3.x中createApp方法没执行一次都产生一个新的vue应用实例他们不共享全局组件/全局指令

以插件化的机制进行全局指令的注册

  const directivePlugin = {
          install(app){
             app.directive('指令名称',{
                // 图片懒加载逻辑
                mounted(el,binding){
                  // el:imgdom对象
                  // binding: value 表达式值
                  // 使用监听函数 在满足条件的情况下 把binding.value 交给 el的src属性
                }
             })
          }
       }
       createApp(APP).use(directivePlugin)