vue3中使用全局自定义指令和组件自定义指令

简介: 全局自定义指令和组件自定义指令的区别,除了写法不同和作用不同,其他的包括生命周期的使用方法都是一致的,全局自定义指令在main.ts中注册后整个项目都可以使用,而组件自定义指令只能在组件中注册,并且在组件中使用。

这篇文章会教大家如何实现全局自定义指令和组件自定义指令

       📓全局自定义指令和组件自定义指令的区别,除了写法不同和作用不同,其他的包括生命周期的使用方法都是一致的,全局自定义指令在main.ts中注册后整个项目都可以使用,而组件自定义指令只能在组件中注册,并且在组件中使用。

1,全局自定义指令

       📓首先我们可以了解下为什么要创建全局自定义指令,首先,vue官方给我们提供了一些指令,那些指令虽然很强大,但是有可能会不适合当前公司的一个开发的实际的业务逻辑,所以这时候我们就得需要通过官方提供的方法创建输入自己的指令了。

       📓下面根据我的思路来一步步的设计全局自定义组件吧

1.1 创建组件的执行函数

        📓在项目中新建文件夹directive,在文件夹里新建idnex.ts文件,在文件里写处理逻辑

       image.gif编辑

1.2 在里面写写我们的指令的生命周期和处理代码

export default {
  click: {
      beforeMount(el:any, binding:any, vnode:any) { //元素被挂载到dom之前调用
        console.log('beforeMount');
      },
      mounted(el:any, binding:any, vnode:any) {//元素被挂载到dom之后调用
        console.log('mounted');
      },
      beforeUpdate(el:any, binding:any, vnode:any, prevvnode:any) {//vnode(虚拟节点)更新前调用
        console.log('beforeUpdate');
      },
      updated(el:any, binding:any, vnode:any, prevvnode:any) {//vnode(虚拟节点)更新后调用
        console.log('updated');
      },
      beforeUnmount(el:any, binding:any, vnode:any) {//vnode(虚拟节点)卸载前调用
        console.log('beforeUnmount');
      },
      unmounted(el:any, binding:any, vnode:any) {//vnode(虚拟节点)卸载后调用
        console.log('unmounted');
      },
  },
};

image.gif

      📓如上方所示,vue的创建指令的方法,处理接受指令名称的话,还需要接受我们指令的生命周期,vue创建指令的方法接受2个参数,第一个参数是指令名称,第二个参数是对象,对象里面的属性是指令的生命周期,属性值就是在当前生命周期所要执行的函数。      

这里在解释下,为什么要元素要挂在到dom上还有解释什么是vnode

       📓 首先你页面中的元素,最终都会变成真正的dom元素,并讲这个元素放在页面上,这个过程解释挂载,在挂载这个元素之前,vue首先会创建组件的vnode,也就是虚拟节点,然后在将组件的虚拟节点(vnode)转换成真实的dom元素,并将其插入到页面的特定位置上去,所以这就是vnode,元素在页面上显示之前需要在vnode上创建虚拟节点

      📓至于为什么要将元素挂载到dom,我们知道,vue的整个体系,都是需要dom来支撑的,因为只有将元素插入到dom中,这个元素才会在页面上显示,而且只有将这个元素插入挂载到dom中,vue才能管理他的生命周期,响应式,事件处理等。

指令的生命周期和组件的生命周期很相似。很多地方都基本一致

 1.3 在main.ts中注册指令

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import store from "./store";
import dir from "./directive/index"; //从这里导入我们创建的指令的生命周期
const app = createApp(App); //创建app实例
app.directive("myDirective", dir.click); //注册指令需要调用app的directive方法,这个方法传入2个参数第一个参数就是我们的组件名称,第二个参数就是我们在directive文件夹里写的对象,对象里有指令的生命周期方法
app.use(router).use(ElementPlus).use(store).mount("#app");

image.gif

这里要注意下,注册指令一定要比挂载app之前,要比mount("#app")更早执行!!!,不然会注册失败

1.4 在页面上使用

        📓当我们注册完成后,就能在元素上使用了,如下

<div>
        <button v-myDirective>{{ butt }}</button>
        <button @click="buttfn">修改 </button>
        <RouterView />
    </div>

image.gif

        📓这里我给button加上了一个指令,这里要注意下,我们在页面上使用指令时,得在我们注册时写的指令名称前加上 v-

1.5 获取元素的dom,并修改

       📓现在在页面上元素使用,还不算达到我们的预期,这时候我们需要看如何操作元素,这才算达到我们的预期,首先,我们在directive文件夹里,找到我们定义的指令生命周期,生命周期的属性值接受一些参数,我们打印下这些参数是啥

image.gif

看下页面上显示的结果

image.gif

📓我们能看到,el居然是我们在页面上绑定元素的元素对象,我们可以通过这个元素对象来修改这个元素的属性,或者是进行一些事件操作了。

📓比如,我要修改元素的颜色

image.gif

📓这时候还是有些不够的,假设,我们想实现一个@click的功能,如果用指令实现咧,这时候我们就需要靠函数中另外一个参数binding,通过这个参数来接收从页面上传入的一些值,包括函数,

📓我们在页面上定义一个函数,通过  指令="函数" 的方法,将指令传给函数

<template>
    <div>
        <button v-myDirective = "butt">{{ butt }}</button> //将函数传给指令
        <RouterView />
    </div>
</template>
<script lang="ts">
import router from '@/router'
import { ref } from "vue"
export default ({
    setup() {
        const butt = ref("跳转")
        const fn = () => {  //定义一个函数
            router.push("/user")
        }
        return {
            fn,butt
        }
    }
})
</script>

image.gif

📓在我们的指令生命周期函数里,就能接受这个函数,并写入跳转的指令

export default {
  click: {
    mounted(el: any, binding: any) {//元素被挂载到dom之后调用
      el.addEventListener("click",binding.instance.fn)  //通过binding.instance来获取我们之前传入的参数,在通过这个元素对象写入一个点击事件,就实现了类似于@click一样的功能了
    },
  },
};

image.gif

📓这样,我们的自定义指令也有和@click一样的功能啦,这只是简单的用法,当配合指令的生命周期函数后,能够实现的东西非常非常的多。

2,组件自定义指令

      📓  组件自定义指令的生命周期和用法和全局自定义指令的用法一致,只是写法不同而已,看下方的例子

       

<template>
    <div>
        <button v-myDirective = "butt">{{ butt }}</button>
        <div v-color = "'red'">我是组件内指令</div>   //2.将定义好的组指令放在页面上使用
        <RouterView />
    </div>
</template>
<script lang="ts">
import router from '@/router'
import { ref } from "vue"
export default ({
    setup() {
        const butt = ref("跳转")
        const fn = () => {
            router.push("/user")
        }
        return {
            fn,butt
        }
    },
    directives:{  //1.在组件里添加directives属性,属性值是对象,对象的属性就是我们的指令名称,属性值也是一个对象,在对象里写生命周期函数即可
        color:{
            mounted(el:any,bind:any){
                el.style.color=bind.value
            }
        }
    }
})
</script>

image.gif

image.gif


相关文章
|
14天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
130 2
|
12天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
138 11
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
565 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
264 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
148 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
99 0
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
213 1
|
JavaScript 前端开发
【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点
写在前面    一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残。   最近博主我沉淀了几个月,或者说懒了几个月。然而大佬的指点总是一针见血,能够让人看到方向。所以我现在有觉得,一个好的学习环境指的一定是有个能指点你的大佬。
2424 0
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
545 77