在vue中封装方法以及多处引用该方法详解

步骤：

1.先建立一个文件，放你想封装的方法；然后导出；

部分代码：

注： 导出这个地方需要特别注意：如果是一个对象的话：export 对象；如果是一个函数的话：export { 函数 }

2.引入文件：

补充知识：vue uni-app 公共组件封装，防止每个页面重复导入

1、公共插件

实现目标，将公共组件或者网络请求直接在this中调用，不需要再页面引用

#例如网络请求
var _this = this;
 this.api.userInfo({
 token: ''
 }

#通用工具
_this.utils.showBoxFunNot("是否退出登陆", function() {
 console.log("确定")
 _this.api.logOut({}, function(data) {
 _this.utils.setCacheValue('token', '')
 uni.redirectTo({
 url: '/pages/LogIn/LogIn'
 });
 })
 })

公共插件utils.js 或者可以将网络请求api.js 封装成对象

var utils = {
 function_chk: function(f) {
 try {
 var fn = eval(f);
 if (typeof(fn) === 'function') {
 return true;
 } else {
 return false;
 }
 } catch (e) {

 }
 return false;
 },
 showBox: function(msg) {
 uni.showModal({
 title: "错误提示",
 content: "" + msg,
 showCancel: false,
 confirmText: "确定"
 })
 },
 showBoxFun: function(msg, fun) {
 uni.showModal({
 title: "提示",
 content: "" + msg,
 showCancel: false,
 confirmText: "确定",
 success: (res) => {
 fun(res)
 }
 })

 },
 showBoxFunNot: function(msg, fun, cancel) {
 var _this = this
 uni.showModal({
 title: "提示",
 content: "" + msg,
 confirmText: "确定",
 cancelText: "取消",
 success: (res) => {
 if (res.confirm) { //取消
 if (_this.function_chk(fun)) {
 fun(res)
 }
 } else if (res.cancel) { //确定
 if (_this.function_chk(cancel)) {
 cancel(res)
 }
 }
 },
 can: (err) => {

 }
 })

 },
 notNull: function(obj, msg = '参数不能为空') {
 var keys = Object.keys(obj);
 console.log(keys)
 for (var i in keys) {
 var keyName = keys[i]
 console.log(keys[i])
 var value = obj[keyName]
 if (value == '') {
 console.log("为空的参数：",keyName)
 this.showBox(msg)
 return true;
 }
 console.log(value)
 }
 return false;
 },
 getCacheValue: function(key) {
 var value = '';
 try {
 value = uni.getStorageSync(key);
 } catch (e) {

 }
 return value;
 },
 setCacheValue: function(key, value) {
 try {
 value = uni.setStorageSync(key, value);
 } catch (e) {

 }
 }
}
export default utils

2、注册到vue 实例中

main.js 文件中将工具注册进入

import utils from 'common/utils.js';
import api from 'common/api.js';

Vue.config.productionTip = false
Vue.prototype.utils = utils
Vue.prototype.api = api

以上这篇在vue中封装方法以及多处引用该方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue之封装多个组件调用同一接口的案例

    背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => { all = res.data.value || []; }, fail: err => { tipInfo(err.data.desc, '提示', false, 'warnin

  • Vue 组件复用多次自定义参数操作

    场景: 当项目中多处出现相同的模块时,此时的正常考虑是将其做成公共组建,通过传参不同,实现多处复用 具体: 背景:项目使用的技术是VUE+ElementUI 此处,多处出现的模块是select选择框,封装成组件后,传给它option的值,代码如下: <!--组件文件 比如说这个组件叫 vSelect 下面会用--> <template> <el-select @change="handleChange" v-model="value"

  • vue中组件的3种使用方式详解

    vue中组件的3种使用方式详解

    前言 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码. 在vue angular react三大前端框架的大前端时代.许多人选择了vue,在 github 上的star,vue已经超过react的数量了.虽然star并不能代表vue更强,不过在发展速度上看来,vue确实很快. 在模块化的前端时代,万物皆组件,vue学习组件是必不可少的. 可是在大多数人熟悉了纯html.jq之后,在初次接触vue的组件时候,却是满脸蒙蔽. 今天咱们以最简单的方式,带vue小白童鞋们

  • 在vue中封装方法以及多处引用该方法详解

    步骤: 1.先建立一个文件,放你想封装的方法:然后导出: 部分代码: 注: 导出这个地方需要特别注意:如果是一个对象的话:export 对象:如果是一个函数的话:export { 函数 } 2.引入文件: 补充知识:vue uni-app 公共组件封装,防止每个页面重复导入 1.公共插件 实现目标,将公共组件或者网络请求直接在this中调用,不需要再页面引用 #例如网络请求 var _this = this; this.api.userInfo({ token: '' } #通用工具 _this

  • 通过vue手动封装on、emit、off的代码详解

    一.概念 1. $on("事件名称",回调函数) 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit("事件名称",需要传递的值) 事件触发时,会触发当前事件身上所有的函数 3. $off("事件名称",[需要解绑的函数]) 事件解绑时,若指定解绑函数则只解绑相应函数,否则解绑全部 二.手动封装on,emit,off事件在vue中的作用 |  在vue中进行非父子组件传值时,我们可以通过在vue的原型上添加一个公共的vue实例,组件之间

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

  • Vue 中指令v-bind动态绑定及与v-for结合使用详解

    目录 前言: 一. v-bind动态绑定class 1. v-bind动态绑定class(对象语法) 2. v-bind动态绑定class(数组用法) 3.v-bind动态绑定style(对象语法) 4.v-bind动态绑定style(数组语法) 二.v-bind和v-for的结合使用 前言: 在昨天的文章中已经基本介绍了,v-bind的基本使用,可以参考学习,本文是更加具体的解释v-bind的使用,和v-for结合的使用. 一. v-bind动态绑定class 1. v-bind动态绑定cla

  • Vue中Router路由两种模式hash与history详解

    hash 模式 (默认) 工作原理: 监听网页的hash值变化 -> onhashchange事件, 获取location.hash 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转 主要用在单页面应用(SPA) // 模拟原理 // 监听页面hash值变化 window.onhashchange = function(){ // 获取当前url的哈希值 const _hash = locat

  • vue中的双向数据绑定原理与常见操作技巧详解

    本文实例讲述了vue中的双向数据绑定原理与常见操作技巧.分享给大家供大家参考,具体如下: 什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也是算是vue的精髓之处了.值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.

  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    目录 前言 实现 第一种情况 第二种情况 语法 方法一 方法二 总结 前言 在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况. 实现 第一种情况 如果是对于代码中实实在在存在的 HTML 标签,我们可以直接绑定变量来设置样式,比如改变表格的边框. 先设置一个表格边框样式的 JS 变量(table_border). 再在 HTML 标签的 style 属性上绑定该 JS 变量. <template> <div class="app-

  • vue中路由传参以及跨组件传参详解

    路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

  • vue中i18n的安装与几种使用方式详解

    vue中i18n的安装与几种使用方式详解

    目录 vue中i18n安装 项目中的使用 使用方式 组件里使用 使用方式js 总结 介绍 Vue I18n 是 Vue.js 的国际化插件.它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中. vue中i18n安装 1.在项目中安装i18n npm install vue-i18n 2.如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n: import Vue from 'vue' import VueI18n from 'vue-i18n'

  • vue中created、watch和computed的执行顺序详解

    目录 前言 为什么? 1.关于initComputed 2.关于initWatch 总结 前言 面试题:vue中created.watch(immediate: true)和computed的执行顺序是啥? 先看个简单的例子: // main.js import Vue from "vue"; new Vue({ el: "#app", template: `<div> <div>{{computedCount}}</div> &

随机推荐