Try local introduction instructions when writing a demo using 

<template>
    <h1 v-show="visible" v-click-outside="clickOut">{{ msg }}</h1>
</template>
<script setup>
    import {reactive} from 'vue';
    import clickOutside from 'directive/clickOutside.js';

    const props = defineProps({
        msg: String,
        visible: Boolean
    })
    const emit = defineEmits(['close']);
    const clickOut = () => {
        console.log(`close`, 1111)
        props.visible && emit('close');
    }

</script>
Copy the code

But the result is not satisfactory, the error is as follows

In fact should be in this way: the import vClickOutside from ‘directive/clickOutside. Js’;

The focus of vClickOutside is this V, which is needed because globally registered directives (such as V-focus) are likely to conflict with locally declared variables of the same name. The v prefix makes the intent of using variables as instructions clearer and reduces the number of unexpected situations.

Stuck for a long time, I hope I can help you step on the pit

Attach global instruction introduction mode, and vue2 is not different

import longPress from 'directive/longPress';
import focus from 'directive/focus';
import App from './App.vue';

const app = createApp(App);
app.directive('longpress', longPress);
app.directive('focus', focus);
app.mount('#app');

Copy the code

Reference: github.com/vuejs/rfcs/…