请使用vue3书写一个自定义指令

在Vue 3中，你可以创建自定义指令来增强组件之间的交互。下面是一个简单的自定义指令`v-custom-directive`的示例，它会在元素上绑定时显示一条消息：

// 定义自定义指令
import { DirectiveBinding } from 'vue';

export default {
  // 指令名称
  name: 'custom-directive',

  // 添加指令选项
  inserted: (el: HTMLElement, binding: DirectiveBinding) => {
    // 当指令被插入到DOM中时执行此函数
    console.log(`Custom directive bound to element with message: ${binding.value}`); // 绑定值通常是你传入的表达式的结果
    el.textContent = binding.value; // 设置元素文本为绑定值
  },
};

然后在模板中使用这个指令：

<div v-custom-directive="显示的消息"></div>

在这个例子中，当"显示的消息"改变时，指令会被重新插入并更新元素的内容。