vue怎么封装和调用公共方法

业务中经常会碰见同一方法需要多次调用,这时候如果每次都写一遍就显得代码不够优雅了,所以封装公共方法是非常有必要的


第一步:
封装公共方法
1.在vue项目中src/assets/js/创建js文件 例:common.js
2.在main.js 引用common->然后实例化

/* 引入公共函数 */
import common from './assets/js/common'
Vue.use(common);

3.common.js写一个示例

export default {
  install(Vue) {
    Vue.prototype.hand = function() {
      alert("a");
    };
  }
};

这里我们就封装好了示例公共方法,接着我们如何显示调用

调用公共方法
1.在任何一个vue文件里面的生命周期this.方法名就可以了,因为已经在main.js全局实例化了

created(){
   this.hand() 
}

2.页面就会调用方法

 

Vue2前端中,封装一个头部公共组件是很常见的做法,可以提高代码复用性和模块化。通常,头部公共组件会包含如logo、导航菜单、用户信息等固定的元素。下面是一个简单的步骤说明: 1. 创建文件夹结构:首先,创建一个名为`components`的新文件夹,用于存放自定义组件。在这个文件夹下创建一个子文件夹,例如`Header`。 2. 创建头部组件:在`Header`文件夹里新建一个名为`Header.vue`的文件,内容如下: ```html <template> <header class="header"> <div class="logo">Logo</div> <nav class="navbar"> <!-- 导航链接列表 --> <router-link v-for="(item, index) in menus" :key="index" :to="{ path: item.path }">{{ item.name }}</router-link> </nav> <div class="user-info"> <!-- 用户信息区域,如果有登录状态显示用户名或其他个性化信息 --> {{ userInfo || '未登录' }} </div> </header> </template> <script> export default { name: "Header", data() { return { menus: [], // 根据需求从服务端或配置获取菜单数据 userInfo: null, // 存储用户的登录信息,实际应用中应从 vuex 或者 localStorage 获取 }; }, computed: { // 可能需要计算属性处理动态内容 logoUrl() { // 返回logo图片地址 // 这部分可以根据实际情况替换,比如从API获取 return require('@/assets/logo.png'); } }, }; </script> ``` 3. 使用组件:在需要使用头部组件的地方,通过`import`导入并作为局部组件注册或直接插入到布局模板中: ```vue <template> <div id="app"> <Header /> <router-view></router-view> </div> </template> <script> import Header from '@/components/Header.vue'; export default { components: { Header, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值