vue3 vNode、h函数中使用自定义指令，如v-loading

最新推荐文章于 2024-08-26 10:57:03 发布

0.0kbps

最新推荐文章于 2024-08-26 10:57:03 发布

阅读量1.8k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_26772309/article/details/128627065

版权

本文介绍了Vue3中用于处理自定义指令的两个关键函数：resolveDirective用于根据名称获取自定义指令，而withDirectives则用于在VNode上应用这些指令。这两个函数都在渲染或setup函数内使用，例如在示例中展示了如何结合使用它们来在组件中实现加载指示器。

摘要由CSDN通过智能技术生成

// resolveDirective函数可以引入自定义指令  
const elLoading = resolveDirective('loading')  
return () => {  
    // withDirectives函数可以将自定义指令应用于vNode  
    // withDirectives的第一个参数为vNode
    return withDirectives(h('div', {class: 'table'}, [  
        h(  
            ElTable,  
            {  
                class: 'table',  
                ref: 'table',  
                border: true,  
                size: 'mini',
                data: state.data,  
                ...props.props,  
            },  
            {  
                default: () => {  
                    return renderColumn()  
                }, 
            }  
        ),  
    ]), [[elLoading, state.loading]]) // withDirectives的第二个参数为resolveDirective引入的自定义指令 
}

vue3中的两个函数

1、resolveDirective
如果在当前应用实例中可用,则允许通过其名称解析一个directive。
返回一个Directive,如果没有找到,则返回undefined
只能在render或setup函数中使用。

	const app = Vue.createApp({})
	app.directive('highlight', {})
	import { resolveDirective } from 'vue'
	render () {
	  const highlightDirective = resolveDirective('highlight')
	}

2、withDirectives
允许将指令应用于VNode,返回一个包含应用指令的VNode。
withDirectives只能在render或setup函数中使用。


	withDirectives(vnode,directives)
		directives:[[directive, value, arg, modifiers],[...]]
			value:		例如：v-my-directive="1 + 1" 中，绑定值为 2。
			arg:		例如 v-my-directive:foo 中，参数为 "foo"。
			modifiers:	例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
	const MyDirective = resolveDirective('MyDirective')
	const nodeWithDirectives = withDirectives(h('div'),[[MyDirective, 100, 'click', { prevent: true }]])