vue3自定義指令看完這篇就入門了

更新時(shí)間：2022年11月22日 14:44:03 作者：星月前端

不同于vue2不需要被use使用,vue3的機(jī)制是你的指令必須要被注冊(cè)成方法的,這樣你才能全局使用到自定義指令,下面這篇文章主要給大家介紹了關(guān)于vue3自定義指令的相關(guān)資料,需要的朋友可以參考下

前言
1. 什么是自定義指令
2. 聲明私有自定義指令的語(yǔ)法
3. 使用自定義指令
4. 聲明全局自定義指令的語(yǔ)法
5. updated 函數(shù)
6. 函數(shù)簡(jiǎn)寫
7. 指令的參數(shù)值
附：下面根據(jù)自定義指令知識(shí)點(diǎn)衍生的一個(gè)小例子
總結(jié)

前言

這篇文章介紹vue組件中的自定義指令！看完不會(huì)你打我。哈哈哈，開(kāi)玩笑的??！

1. 什么是自定義指令

vue 官方提供了 v-for、v-model、v-if 等常用的內(nèi)置指令。除此之外 vue 還允許開(kāi)發(fā)者自定義指令。

vue 中的自定義指令分為兩類，分別是：

私有自定義指令
全局自定義指令

2. 聲明私有自定義指令的語(yǔ)法

在每個(gè) vue 組件中，可以在 directives 節(jié)點(diǎn)下聲明私有自定義指令。示例代碼如下：

<script>
export default {
  directives: {
      // 自定義私有指令focus，在使用的時(shí)候要用 v-focus 。
    focus: {
      mounted(el) {
        el.focus()
      },
    },
  },
}
</script>

3. 使用自定義指令

在使用自定義指令時(shí)，需要加上 v- 前綴。示例代碼如下：

<!-- 聲明自定義私有指令focus，在使用的時(shí)候要用 v-focus 。 -->    
<input v-focus/>

4. 聲明全局自定義指令的語(yǔ)法

全局共享的自定義指令需要通過(guò)“單頁(yè)面應(yīng)用程序的實(shí)例對(duì)象”進(jìn)行聲明，示例代碼如下：

import { createApp } from 'vue'

const app = createApp({
  /* ... */
})

// 注冊(cè)（對(duì)象形式的指令）
app.directive('my-directive', {
  /* 自定義指令鉤子 */
})

// 注冊(cè)（函數(shù)形式的指令）
app.directive('my-directive', () => {
  /* ... */
})

// 得到一個(gè)已注冊(cè)的指令
const myDirective = app.directive('my-directive')

5. updated 函數(shù)

mounted 函數(shù)只在元素第一次插入 DOM 時(shí)被調(diào)用，當(dāng) DOM 更新時(shí) mounted 函數(shù)不會(huì)被觸發(fā)。 updated 函數(shù)會(huì)在每次 DOM 更新完成后被調(diào)用。示例代碼如下：

// 聲明全局自定義指令
app.directive('focus', {
  mounted(el) {
    console.log('mounted')
    el.focus()
  },
  updated(el) {
    console.log('updated')
    el.focus()
  },
})

注意：在 vue2 的項(xiàng)目中使用自定義指令時(shí)，【 mounted 要換成 bind 】【 updated 要換成 update 】

6. 函數(shù)簡(jiǎn)寫

如果 mounted 和updated 函數(shù)中的邏輯完全相同，則可以簡(jiǎn)寫成如下格式：

app.directive('focus', (el) => {
    // 在 mounted 和 updated 都會(huì)觸發(fā)這個(gè)函數(shù)方法
  el.focus()
})

7. 指令的參數(shù)值

在綁定指令時(shí)，可以通過(guò)“等號(hào)”的形式為指令綁定具體的參數(shù)值，示例代碼如下：

// 自定義 v-color 指令
app.directive('color', (el, binding) => {
    // binding.value 就是通過(guò) = 綁定的值，在傳值的時(shí)候傳到這 binding.value
  el.style.color = binding.value
})

附：下面根據(jù)自定義指令知識(shí)點(diǎn)衍生的一個(gè)小例子

該例子沒(méi)有特別的技術(shù)難點(diǎn)。只是為了驗(yàn)證一下這兩天學(xué)習(xí)的vue3部分知識(shí)點(diǎn)，存粹是一個(gè)練手記錄～～～

//示例

<template>
    <p>
        改變方向：<input type="text" v-model="direction" />
    </p>
    <p>
        改變數(shù)值：<input type="range" min="0" :max="maxNum" v-model="pinPadding" />
    </p>
    <p>
        <button @click="reset">重置</button>
    </p>
    <div style="position: relative;border: 1px solid red;width: 800px;height: 400px;margin: 0 auto;">
        <p v-pin:[direction]="pinPadding">數(shù)據(jù)：{{pinPadding}},方向:{{direction}}</p>
    </div>
</template>
<script>
    import two from './components/two.vue'
    import {
        ref,
        reactive,
        defineComponent,
        computed
    } from 'vue'
    export default ({
        name: 'lycApp',
        components: {
            two
        },
        setup(prop, context) {
            const direction = ref('left')
            const pinPadding = ref(0)
            const reset = () => {
                direction.value = 'left'
                pinPadding.value = 0
            }
            const maxNum = computed(()=>{
                if(direction.value == 'right' || direction.value == 'left'){
                    return 650
                }else{
                    return 360
                }
            })
            return {
                direction,
                pinPadding,
                reset,
                maxNum
            }
        },
        directives: {
            pin: {
                mounted(el, binding) {
                    el.style.position = 'absolute'
                    const s = binding.arg
                    el.style[s] = binding.value + 'px'
                },
                updated(el, binding) {
                    el.removeAttribute('style')
                    el.style.position = 'absolute'
                    const s = binding.arg
                    el.style[s] = binding.value + 'px'
                }
            }
        }
    })
</script>

//效果圖