vue3自定义组件或指令

Vue 3 自定义方法与指令全面指南

在实际项目中，我们常常需要使用自定义的指令和组件，以满足特定的业务需求。Vue 3 提供了简单而强大的全局注册机制，使得我们可以轻松地在整个应用程序中使用这些自定义功能。

全局注册指令

这里将所有的自定义都放在了registeredApp文件中

// main.ts
import registeredApp from './utils/registeredApp';

const app = createApp(App);
registeredApp(app);

具体的registeredApp文件内容

// ./utils/registeredApp.ts

import Icon from 'components/Icon/index.vue';
import { App } from 'vue';

/**
 * 全局注册指令
 * @param app
 */
const registeredDirective = (app: App) => {
  // 路径拼接
  app.directive('src', (el: any, binding) => {
    el.src = 'https://www.baidu.com' + binding.value;
  });
};

/**
 * 全局注册组件
 * @param app
 */
const registeredComponent = (app: App) => {
  // 图标
  app.component('com-icon', Icon);
};

export default function registeredApp(app: App) {
  registeredDirective(app);
  registeredComponent(app);
}

在组件中的使用

<img v-src='"img.png"' alt=''>
<com-icon color="#000000" />