vue3渲染函数加入自定义指令（图文教程）

嗯，公众号“程序员野区”收到提问==》

问了自己几个群里小伙伴，总算搞定了。

序：

1. withDirectives是vue3.2.0版本上线的，所以你版本不要低，低了不行
2. 官方的demo在这里，懂的，直接看官方的就可以=》https://cn.vuejs.org/api/render-function.html#withdirectives
3. 我只说重点。所以你要看仔细（说实话，你vue3官网看的明白就没必要看本篇。）
4. 自定义指令不懂的看这篇vue3自定义指令（图文教程）-CSDN博客
5. 渲染函数不懂的看这篇vue3 h函数使用图文教程-CSDN博客
6. 你如果急，完整代码你直接滑到页面最下面去复制
7. 卡到什么前端问题，都可以到雪狼的公众号底下留言，看到有时间再回你==》 “程序员野区”

注意：

你别改下就看看浏览器里input节点是不是有渲染出来一个自定义指令，自定义指令是不会在渲染后的页面看的到的

正文：

        既然官方的demo看不懂，来跟着我的节奏来！

        你新建一个test.vue(router.ts路由记得配置test！)代码如下

<template>
	<renderInput v-cyc ></renderInput>
</template>
 
<script setup lang="ts" >
	import {h} from "vue"
		const vCyc={
			mounted: (el:any) => {
				el.style.backgroundColor="yellow"
			}
		}
		const renderInput = {
		  render: () => {
			return h('input',{
					value:"公众号：程序员野区"
				}
			)
		  }
		}
</script>
<style lang="scss" scoped>
	
</style>

注意看，这个人名字叫小帅。。。。。。。。

注意看，这里有三部分组成，截图就看红色框框里的。

第1部分

我们我们用渲染函数渲染了一个input组件

import {h} from "vue"
const renderInput = {
  render: () => {
	return h('input',{
			value:"公众号：程序员野区"
		}
	)
  }
}

第2部分

我们，定义了一个自定义指令（vue3的哦！vue3,雪狼是3.2.4哦！）

const vCyc={
	mounted: (el:any) => {
		el.style.backgroundColor="yellow"
	}
}

绑定这个指令的节点，背景就变成黄色

第3部分

绑定1

大部分绑定是这么绑的

<renderInput v-cyc ></renderInput>

好！我们怎么把这个v-cyc去掉，让他在渲染的时候就绑定进去，而不用再组件引用的时候再去写v-cyc?

来跟着我改

多引入一个withDirectives

import {h,withDirectives} from "vue"

然后自定义组件这么改

const renderInput = {
		  render: () => {
			return withDirectives(
				h('input',{
						value:"公众号：程序员野区"
					}
				),
				[
				  [vCyc]
				]
			)
		  }
		}

去吧 v-cyc去掉

<renderInput></renderInput>

运行

是吧，这样就可以了，当然[vCyc]里面不是只有一个参数，我官网顺下来下，你要是看不懂，你就一个一个参数加看看你很快就懂了

// [Directive, value, argument, modifiers]
type DirectiveArguments = Array<
  | [Directive]
  | [Directive, any]
  | [Directive, any, string]
  | [Directive, any, string, DirectiveModifiers]
>

比如，改成这样

[vCyc, 200, 'top', { animate: true }]

他就相当于我们在template里直接这么写了↓↓↓↓

<div v-cyc:top.animate="200"></div>

我贴个完整的代码        

<template>
	<renderInput></renderInput>
</template>
 
<script setup lang="ts" >
	import {h,withDirectives} from "vue"
		const vCyc={
			mounted: (el:any) => {
				el.style.backgroundColor="yellow"
			}
		}
		const renderInput = {
		  render: () => {
			return withDirectives(
				h('input',{
						value:"公众号：程序员野区"
					}
				),
				[
				  [vCyc]
				]
			)
		  }
		}
</script>
<style lang="scss" scoped>
	
</style>