vue3 文档总结-可复用性&&组合

自定义指令

• 用于对 DOM 进行底层操作
• vue3 自定义指令的周期变为

自定义指令周期

1. beforeMount 在挂载之前调用，可以进行初始化配置
2. mounted： 挂载到父组件的时候调用
3. beforeUpdate: 更新包含此组件的 VNode 值钱调用
4. updated： 在更新之后调用
5. beforeUnmount: 在卸载之前调用
6. unmounted: 当指令与元素解除绑定且父组件已卸载时调用
7. 每一个周期都接受 el, binding 参数

自定义指令参数

1. el: 可用于直接操作 dom
2. binding:

• instance: 使用指令的组件实例
• value: 传递给指令的值
• arg 传递的指令
• modifiers 修饰符
• dir：一个对象，在注册指令时作为参数传递
• vnode, oldVnode 虚拟节点

取得元素：

<template>
  <div v-demo class="div"></div>
</template>

directives: {
   
    demo: {
   
      beforeMount(el, binding) {
   
        el.innerHTML = 'beforeMount'
        console.log('beforeMount')
      },
      mounted(el) {
   
        console.log('mounted')
        el.style.color = 'red'
      },
    }
  }

传值

<template>
  <div v-demo="20" class="div">aa</div>
</template>

 directives: {
   
    demo: {
   
      mounted(el, binding) {
   
        const {
   value} = binding
        el.style.position = 'fixed'
        el.style.top = `${
     value}px`
      },
    }

动态传值或者指令参数

<div v-demo:[dierection]="number" class