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" />