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
	     * 等同于    
自定义指令
*/
return withDirectives((<div>自定义指令</div>),[[permission,'api:view']]); } return ""; }
传递 arg 或 modifiers 值
/**
 * 传递 arg 值
 * 等同于   
自定义指令
*/
withDirectives((<div>自定义指令</div>),[[permission,'api:view','hide']]); /** * 传递 modifiers 值 * 等同于
自定义指令
*/
withDirectives((<div>自定义指令</div>),[[permission,'api:view','',{hide:true}]]); /** * 同时传递 arg 和 modifiers 值 * 等同于
自定义指令
*/
withDirectives((<div>自定义指令</div>),[[permission,'api:view','ok',{hide:true}]]);

你可能感兴趣的:(vue,javascript,前端,vue.js)