vue2中组件互相调用实例methods中的方法实现详解

目录
  • 前言:
  • 开始前:
  • 使用
  • 第一步、定义全局mixin
  • 第二步添加代码提示d.ts声明文件
    • 在项目下新建jsconfig.json
    • 添加shims-vue.d.ts声明文件
    • 添加event-keys.d.ts声明文件
  • 第三步编写webpack插件
    • 新建global-dispatch.js 自动生成event-keys.d.ts
    • 添加vue-path-loader.js webpack loader文件
    • 配置vue.config.js
  • 后记
  • 仓库地址
  • 总结

前言:

大家都知道在vue2中相互调用组件的方法是很麻烦的一件事。比如说要调用子孙组件的的方法,需要refs,refs一层一层往下面找;调用上层组件的可以在组件上挂载,一层可以用v-on 和 emit解决,多层可以用provide和inject,要是多个兄弟组件间呢? 唯一方便点的就是eventBus,bus每次on事件后,都要记得在beforeDestory里面on事件后,都要记得在beforeDestory里面on事件后,都要记得在beforeDestory里面off事件,不然会多次on事件,在on事件,在on事件,在emit触发的时候就会执行多次,导致bug,另外在项目里面bus使用的多了,$emit时具体调用的是在调用的哪一个,在出现重名事件时就会让人非常头疼了,于是我就试着自己实现解决这个问题。

开始前:

我打算用全局mixin来做这个功能。本来打算在每个组件里面定义name来绑定methods的,考虑到这样做每个vue组件里面都要自己手动定义name,而且也容易存在重名的情况,于是我就打算用vue组件所在的路径来做,我发现vue组件实例上$options的prototype下有个__file属性记录了当前文件的路径,当时生产环境下就没有了,于是我想到了写个weboack插件来实现,另外吐槽下webpack的钩子真的多,示例不清晰。vue2项目大多数都是使用的js,代码提示用jsconfig.json结合types, js代码里面用注释jsdoc语法添加代码提示。

使用

直接在组件里面调用globalDispatch方法,有代码提示的哦,考虑到一个组件可能同时调用了多次,所有可以多传一个eKey 进行精确emit。在组件上可以进行eKey绑定(也可以写e-key)。

第一步、定义全局mixin

import Vue from "vue";

const DEFAULT_E_KEY = "__default";
/**
 * 方法合集
 * @type {Record<string, {eKey: string; handler: function}[]>}
 */
const events = {};

/**
 * 全局调用event的mixin
 * @type {Vue & import("vue").ComponentOptions}
 */
const globalDispatch = {
  created() {
    const attrs = this.$attrs;
    const eKey = attrs.eKey ?? attrs["e-key"];
    const filePath = this.$options.__file ?? this.$options.__filePath;
    filePath && addEvents(filePath, this, eKey);
  },
  destroyed() {
    const filePath = this.$options.__file ?? this.$options.__filePath;
    filePath && removeEvents(filePath, this);
  }
};

/**
 * 监听方法
 * @param {string} filePath 获取到的路径
 * @param {Vue} vm vue组件实例
 * @param {string=} eKey event key
 */
function addEvents(filePath, vm, eKey = DEFAULT_E_KEY) {
  const methods = vm.$options.methods;
  if (methods) {
    Object.entries(methods).forEach(([key, handler]) => {
      handler = handler.bind(vm);
      handler.vm = vm;
      const eventKey = `${filePath}:${key}`;
      const event = { eKey, handler };

      if (events[eventKey] && events[eventKey].length) {
        events[eventKey].push(event);
      } else {
        events[eventKey] = [event];
      }
    });
  }
}

/**
 * 移除方法
 * @param {string} filePath 获取到的路径
 * @param {Vue} vm vue组件实例
 */
function removeEvents(filePath, vm) {
  Object.keys(events).forEach(key => {
    if (key.startsWith(filePath)) {
      events[key] = events[key].filter(v => v.handler.vm !== vm);
    }
  });
}

/**
 *
 * @param {import("../../types/event-keys").EventKeys | import("../../types/shims-vue").EventParams} params
 * @param  {...any} args
 * @returns
 */
Vue.prototype.globalDispatch = function dispatch(params, ...args) {
  let eventKey,
    eKey = DEFAULT_E_KEY;
  if (typeof params === "string") {
    eventKey = params;
  } else if (typeof params === "object") {
    eventKey = params.target;
    eKey = params.eKey ?? DEFAULT_E_KEY;
  }

  const eKeyMsg = eKey !== DEFAULT_E_KEY ? `eKey:${eKey},` : "";

  if (
    !eventKey ||
    typeof eventKey !== "string" ||
    !/^[^:]*:[^:](.*){1}$/.test(eventKey)
  ) {
    throw new Error(`${eKeyMsg}eventKey:${eventKey}, 参数不正确!`);
  }

  const handlers = events[eventKey]?.filter(v => v.eKey === eKey);
  if (handlers && handlers.length) {
    const results = handlers.map(v => v.handler(...args));
    if (results.length === 1) return results[0];
    return results.map(result => ({ eKey, result }));
  }

  const method = eventKey.split(":")[1];
  throw new Error(`${eKeyMsg}method:${method},该方法未找到!`);
};

export default globalDispatch;

这个文件主要添加所有的组件的methods到events里面,在Vue.prototype上挂载globalDispatch 方法,方便在vue组件上使用。

第二步添加代码提示d.ts声明文件

在项目下新建jsconfig.json

我用的时vue2.7版本写的,主要时include把types文件夹的文件加进来

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "esnext",
    "baseUrl": ".",
    "allowJs": true,
    "sourceMap": false,
    "strict": true,
    "jsx": "preserve",
    "module": "ESNext",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["DOM", "ESNext"]
  },
  "vueCompilerOptions": {
    "target": 2.7
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*.js", "src/**/*.vue", "types/**/*.ts", "types/**/*.d.ts"]
}

添加shims-vue.d.ts声明文件

在types文件夹下新建shims-vue.d.ts, 因为globalDispatch需要支持两种传参形式,所以使用重载

import Vue from "vue";
import { EventKeys } from "./event-keys";

export type EventParams = { target: EventKeys; eKey: string };

function globalDispatch(eventKey: EventKeys, ...args: any[]): any;
function globalDispatch(eventParams: EventParams, ...args: any[]): any;

declare module "vue/types/vue" {
  interface Vue {
    /**
     * 全局互相调用event的dispatch
     */
    globalDispatch: typeof globalDispatch;
  }
}

添加event-keys.d.ts声明文件

在types文件夹下新建event-keys.d.ts, 这个文件是用来给globalDispatch的第一个参数做代码提示的,手动写可以,写个webpack插件自动读取vue文件的路径和方法自动生成更好,下面会贴出来。

export type EventKeys = "src/App.vue:onClick" | "src/views/IndexView.vue:test";

第三步编写webpack插件

在项目根目录下新建plugins文件夹

新建global-dispatch.js 自动生成event-keys.d.ts

开发者模式下才需要生成event-keys.d.ts,先递归找出所有的vue文件的路径,然后读取文件,用acorn库解析,找出文件的methods里的所有方法名,用prettier格式化后写入到event-keys.d.ts,在项目启动和文件变化后都会执行,在添加methos里新方法或删除后,会执行写入。

const fs = require("fs");
const path = require("path");
const acorn = require("acorn");
const prettier = require("prettier");
const prettierConfig = require("../prettier.config");

/**
 * @typedef {import("webpack/lib/Compiler")} Compiler
 */

const PLUGIN_NAME = "global-dispatch";
const KEYS_PATH = path.resolve(__dirname, "../types/event-keys.d.ts");

class TransformFilePathPlugin {
  /**
   * @param {Compiler} compiler
   * @returns {void}
   */
  apply(compiler) {
    compiler.hooks.done.tap(PLUGIN_NAME, () => {
      process.env.NODE_ENV === "development" && writeEventKeys();
    });
  }
}

function writeEventKeys() {
  const vueFilePaths = getFilePath();
  writeVueKeyPaths(vueFilePaths);
}

/**
 * 缓存内容,防止重复写入
 */
let keysContentCache = fs.readFileSync(KEYS_PATH, "utf-8");

/**
 * 写入__filePath到type Key文件
 * @param {string[]} paths 路径集合
 */
function writeVueKeyPaths(paths) {
  let keysContent = "export type EventKeys =";
  const keys = [];

  paths.forEach(p => {
    let content = fs.readFileSync(getSrcPath(p), "utf-8");
    const scriptMatch = content.match(/<script/g);
    if (!scriptMatch) return;

    const startIndex = content.indexOf("export default");
    if (startIndex < 0) return;

    const endIndex = content.indexOf("</script>", startIndex);
    content = content.substring(startIndex, endIndex);

    const ast = acorn.parse(content, { sourceType: "module" });
    const defaultExportAst = ast.body.find(
      v => v.type === "ExportDefaultDeclaration"
    );

    let properties;
    if (defaultExportAst.declaration.type === "CallExpression") {
      properties = defaultExportAst.declaration.arguments[0].properties;
    }
    if (
      defaultExportAst.declaration.type === "ObjectExpression" &&
      Array.isArray(defaultExportAst.declaration.properties)
    ) {
      properties = defaultExportAst.declaration.properties;
    }

    const methods = properties.find(v => v.key.name === "methods");
    if (!methods) return;

    if (methods.value.properties.length) {
      const methodNames = methods.value.properties.map(
        v => `${p}:${v.key.name}`
      );
      keys.push(...methodNames);
    }
  });

  keysContent += keys.map(v => `'${v}'`).join("|") || "string";

  keysContent = prettier.format(keysContent, {
    ...prettierConfig,
    parser: "typescript"
  });

  if (keysContentCache !== keysContent) {
    keysContentCache = keysContent;
    fs.writeFileSync(KEYS_PATH, keysContent);
  }
}

/**
 *
 * @param {string=} p 路径
 * @returns {string[]} 路径集合
 */
function getFilePath(p = "src") {
  const paths = fs.readdirSync(getSrcPath(p), "utf-8");
  const vueFiles = getVueFiles(paths, p);
  const dirs = getDirs(paths, p);

  if (dirs.length) {
    dirs.forEach(dir => {
      vueFiles.push(...getFilePath(dir));
    });
  }
  return vueFiles;
}

function getDirs(paths, path) {
  return paths
    .map(v => `${path}/${v}`)
    .filter(v => fs.statSync(v).isDirectory());
}

function getVueFiles(paths, path) {
  return paths.filter(v => v.endsWith(".vue")).map(v => `${path}/${v}`);
}

function getSrcPath(p) {
  return path.resolve(__dirname, "../" + p);
}

module.exports = { TransformFilePathPlugin };

添加vue-path-loader.js webpack loader文件

这个文件是用来在vue实例上添加__filePath属性的,本来是想写在上面的插件一起的,无奈没有在webpack文档等地方找到在plugins里添加loader的方法,在vue-loader源码里也没有好的体现。 在开发者环境下vue的$options下有__file可以用,所以只需要生产环境启用

module.exports = function(content) {
  if (process.env.NODE_ENV === "development") return content;

  const filePath = this.resourcePath
    .replace(/\\/g, "/")
    .replace(/(.*)?src/, "src");

  const reg = /export default.*?{/;
  content = content.replace(reg, $0 => `${$0} __filePath: "${filePath}",`);
  return content;
};

配置vue.config.js

添加configureWebpack里的即可

const path = require("path");
const { TransformFilePathPlugin } = require("./plugins/global-dispatch");
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  lintOnSave: false,
  productionSourceMap: false,
  configureWebpack: {
    plugins: [new TransformFilePathPlugin()],
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: [
            {
              loader: path.resolve(__dirname, "./plugins/vue-path-loader.js")
            }
          ]
        }
      ]
    }
  }
};

后记

  • 后续有时间可以弄成npm包,npm install 使用
  • 找下weboack loader 写进webpack plugin 的方法
  • 目前还没找不破坏vue源码的情况下自定组件自定义props的类型,让在组件上 有eKey的单词提示,在vue/type/jsx.d.ts的ReservedProps下添加eKey?: string;才能实现功能。

仓库地址

ywenhao/vue2-global-dispatch (github.com)

总结

到此这篇关于vue2中组件互相调用实例methods中的方法实现的文章就介绍到这了,更多相关vue2组件互相调用methods中方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue中实现methods一个方法调用另外一个方法

    vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时候  this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法: new Vue({ el: '#app', data: { test:111, }, methods: { test1:function(){ alert(this.test) }, test2:function(){ alert("this

  • vue中实现在外部调用methods的方法(推荐)

    1.首先定义一个公共的vue组件: var eventHub = new Vue(); 2.在事件当前的组件中,在created中,用$on向公共的组件eventHub传递,translate是自定义的,getCardNum(data)是要在外部调用的方法; eventHub.$on('translate', function (data) { that.getCardNum(data); }); 3.最后在父组件中,注意负组件要用一个变量保存,var vm = new Vue({}): 4.在

  • 对vue中methods互相调用的方法详解

    如下所示: 最近在学习vue,并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面,但是中间遇到methods里的方法调用问题.本身源码是没有调用的,但是我想直接调用多方便,结果出错了--然后百度了一波,终于解决了~ 分享并做个笔记. delAllOrderList:function(goods) { this.tableData = []; this.totalCount = 0; this.money = 0; }, checkout:functi

  • vue2中组件互相调用实例methods中的方法实现详解

    目录 前言: 开始前: 使用 第一步.定义全局mixin 第二步添加代码提示d.ts声明文件 在项目下新建jsconfig.json 添加shims-vue.d.ts声明文件 添加event-keys.d.ts声明文件 第三步编写webpack插件 新建global-dispatch.js 自动生成event-keys.d.ts 添加vue-path-loader.js webpack loader文件 配置vue.config.js 后记 仓库地址 总结 前言: 大家都知道在vue2中相互调用

  • java中利用反射调用另一类的private方法的简单实例

    我们知道,Java应用程序不能访问持久化类的private方法,但Hibernate没有这个限制,它能够访问各种级别的方法,如private, default, protected, public. Hibernate是如何实现该功能的呢?答案是利用JAVA的反射机制,如下: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; public class ReflectDemo {

  • nodejs中函数的调用实例详解

    一.调用本js文件中的函数 var http = require('http'); http.createServer(function (request,response){ response.writeHead(200, {'Contet-Type':'text/html;charset=utf-8'}); if(request.url!=='/favicon.ico'){ funl(response); response.end(''); } }).listen(8000); consol

  • Java中的数组复制(clone与arraycopy)代码详解

    JAVA数组的复制是引用传递,而并不是其他语言的值传递. 1.clone protectedObjectclone() throwsCloneNotSupportedException创建并返回此对象的一个副本."副本"的准确含义可能依赖于对象的类.这样做的目的是,对于任何对象x,表达式: x.clone()!=x为true,表达式: x.clone().getClass()==x.getClass()也为true,但这些并非必须要满足的要求.一般情况下: x.clone().equa

  • C++ 中的虚函数表及虚函数执行原理详解

    为了实现虚函数,C++ 使用了虚函数表来达到延迟绑定的目的.虚函数表在动态/延迟绑定行为中用于查询调用的函数. 尽管要描述清楚虚函数表的机制会多费点口舌,但其实其本身还是比较简单的. 首先,每个包含虚函数的类(或者继承自的类包含了虚函数)都有一个自己的虚函数表.这个表是一个在编译时确定的静态数组.虚函数表包含了指向每个虚函数的函数指针以供类对象调用. 其次,编译器还在基类中定义了一个隐藏指针,我们称为 *__vptr,*__vptr 是在类实例创建时自动设置的,以指向类的虚函数表.*__vptr

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • Vue.js中对css的操作(修改)具体方式详解

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas

  • Spring中bean的初始化和销毁几种实现方式详解

    Bean的生命周期 : 创建bean对象 – 属性赋值 – 初始化方法调用前的操作 – 初始化方法 – 初始化方法调用后的操作 – --- 销毁前操作 – 销毁方法的调用. [1]init-method和destroy-method 自定义初始化方法和销毁方法两种方式:xml配置和注解. ① xml配置 <bean id="person" class="com.core.Person" scope="singleton" init-meth

  • C++中成员函数和友元函数的使用及区别详解

    为什么使用成员函数和友元函数 这个问题至关重要,直接影响着后面的理解: 程序数据: 数据是程序的信息,会受到程序函数的影响.封装是面向对象编程中的把数据和操作数据的函数绑定在一起的一个概念,这样能避免受到外界的干扰和误用,从而确保了安全. 数据封装引申出了另一个重要的 OOP 概念,即 数据隐藏 .数据封装 是一种把数据和操作数据的函数捆绑在一起的机制, 数据抽象 是一种仅向用户暴露接口而把具体的实现细节隐藏起来的机制.C++ 通过创建类来支持封装和数据隐藏(public.protected.p

随机推荐