Vue 自定义指令 directive

Posted 2022-12-08 哈娄

指令的钩子函数

• bind：只调用一次，指令在第一次绑定到元素时调用。这里可以进行一次性的初始化设置
• inserted：被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated: 组件在组件的VNode和子组件的VNode全部更新后调用
• unbind:只调用一次,指令与元素解绑时调用

钩子函数的参数

• el: 指令所绑定的元素，可以用来直接操作 DOM，就是放置指令的那个元素。

• binding: 一个对象，里面包含了几个属性，这里不多展开说明，官方文档上都有很详细的描述。

• vnode：Vue 编译生成的虚拟节点。

• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

代码

需求：按钮点击，实现不同的跳转方式

1.新建 directive.js

// 全局注册自定义指令
import Vue from "vue";
Vue.directive('hrefLink', 
    inserted(el, binding, vNode) 
        // 通过binding.value获取参数
        const url = binding.value.url || ''
        const openType = binding.value.openType || 1
        // 节点绑定点击事件，进行处理业务
        el.onclick = function() 
          if (openType == 1) 
            window.location.href = url
           else if (openType == 2) 
            window.open(url)
           else 
            return
          
        
      
)

2.在main.js中引入

import '**/directives.js'; 

3.组件内使用

<div v-hrefLink=" url: `xx/xx`, openType: 2 ">点击跳转喽</div>