vue3 jsx或tsx中使用自定义指令

自定义指令"/>

vue3 jsx或tsx中使用自定义指令

vue3 jsx或tsx中使用自定义指令

直接使用

直接在元素中使用，只能传递 value 和 arg 值

function render(){ return (<div v-permission="api:view">自定义指令</div>);
}function render(){ return (<div v-permission:hide="api:view">自定义指令</div>);
}

使用withDirectives函数

import { resolveDirective  ,withDirectives } from 'vue'
//......
//......
// 使用
function render(){// 查找注册的指令var permission = resolveDirective('permission');if(permission){/*** 传递 value* 等同于    <div v-permission="api:view">自定义指令</div>*/return withDirectives((<div>自定义指令</div>),[[permission,'api:view']]);}return "";
}

传递 arg 或 modifiers 值

/*** 传递 arg 值* 等同于   <div v-permission:hide="api:view">自定义指令</div>*/
withDirectives((<div>自定义指令</div>),[[permission,'api:view','hide']]);/*** 传递 modifiers 值* 等同于   <div v-permission.hide="api:view">自定义指令</div>*/
withDirectives((<div>自定义指令</div>),[[permission,'api:view','',{hide:true}]]);/*** 同时传递 arg 和 modifiers 值* 等同于   <div v-permission:ok.hide="api:view">自定义指令</div>*/
withDirectives((<div>自定义指令</div>),[[permission,'api:view','ok',{hide:true}]]);