vue3.0自定义指令
- 作用:对普通 DOM 元素进行底层操作,这时候就会用到自定义指令
- 定义指令
- vMove: Directive = {} || (el,dir) => {}
- vMove 就是定义的指令名称
- 使用指令
<A v-move />
- 给指令传递参数
<A v-move="{ color: color }" />
- 接受参数,一般来说,再mounted之中接受,然后进行dom节点操作
自定义指令之中的生命周期
- 常使用的生命周期为:
- mounted
- 再挂载的时候,针对dom节点进行操作,写入dom节点样式什么的啊、dom节点的自动聚焦、等等
- updated
- 值的更新时触发
<A v-move:bbb.xzl="{ color: 'yellow' , flag: flag }" />
- eg:一个按钮控制flag值的变化时,这个updated钩子函数会触发
- unmounted
- 卸载的时候触发,
- 比如使用 v-if 控制A组件的显示与隐藏,这时候会触发之
main.vue
<template>
<div>
<!-- v-move 使用自定义指令 -->
<A v-move:bbb.xzl="{ color: 'yellow' }" />
</div>
</template>
<script setup lang="ts">
import {
Directive, DirectiveBinding } from 'vue'
import A from './childCom/A.vue'
type Dir = {
color: String
}
const vMove: Directive = {
created() {
console.log('created')
},
beforeMount(...args: Array<any>) {
console.log('beforeMount', args)
},
mounted(el: HTMLElement, dir: DirectiveBinding<Dir>) {
console.log('mounted', el, dir.value)
el.style.color = dir.value.color
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeUnmount() {
console.log('beforeUnmount')
},
unmounted() {
console.log('unmounted')
},
}
</script>
<script lang="ts">
export default {
name: 'Main',
}
</script>
<style lang="scss" scoped></style>
A.vue
<template>
<div class="a">A</div>
</template>
<script setup lang="ts">
import {
} from 'vue'
</script>
<script lang="ts"