Vue3自定义指令使用

最新推荐文章于 2024-09-06 14:19:46 发布

原创最新推荐文章于 2024-09-06 14:19:46 发布 · 196 阅读

CC 4.0 BY-SA版权

文章标签：

自定义指令使用文档：https://cn.vuejs.org/guide/reusability/custom-directives.html

自定义指令是一个对象，它自己有一个生命周期，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。

在不同情况下使用方式不同：

第一种使用：<script lang="ts">，局部注册

<div v-bttn="'ggg'">nihao</div>

<script lang="ts">
export default {
    directives: {
        bttn: {
            mounted(el, binding) {
                console.log('###############')

                console.log({ el, binding })
            },
            updated(el, binding) {
                console.log('###############')
                console.log({ el, binding })
            },
        },
    },
}
</script>

第二种使用：<script lang="ts" setup>，不需要注册，直接使用

 <div class="protocol-input">
     <el-input
         clearable
         v-model.trim="data.input"
         placeholder="请输入协议名称"
         class="input-with-select"
         @change="search"
         maxlength="64"
         :suffix-icon="Search"
         v-focus
      />
 </div>
 <el-button type="primary" class="addBtn" v-btn="'ggg'">新&nbsp;增</el-button>



<script lang="ts" setup>
const vFocus = {
    mounted(el, binding) {
        console.log('----------')

        console.log({ el, binding })
    },
    updated(el, binding) {
        console.log('----------')
        console.log({ el, binding })
    },
}
const vBtn = {
    mounted(el, binding) {
        console.log('*************')

        console.log({ el, binding })
    },
    updated(el, binding) {
        console.log('*************')
        console.log({ el, binding })
    },
}
</script>

注意：使用必须是【v+大写开头】，否则不生效