返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何把组件方法暴露到window对象中
  • 524
分享到

vue如何把组件方法暴露到window对象中

2024-04-02 19:04:59 524人浏览 安东尼
摘要

目录把组件方法暴露到window对象中方法 1(简单,但不推荐)方法 2(推荐,解决方法 1 的痛点)将方法绑定到window对象下,给app端调用把组件方法暴露到window对象中

把组件方法暴露到window对象中

方法 1(简单,但不推荐)

mounted() {
  // 2. 在mounted阶段声明globalFn,来调用组件内的方法
  window.globalFn = () => {
    this.getDetail()
  }
},
methods: {
  // 1. 组件内有一个getDetail方法,需要暴露给window,以供嵌入该页面的客户端调用
  getDetail() {
    // 业务逻辑
  }
}

优点:

  • 简单: 适合暴露的方法不太多的系统

缺点:

  • 变量名易冲突: 如果需要暴露的方法越来越多,那么 window 对象中的全局变量也会越来越多,容易变量名冲突
  • 位置分散: 随着业务的复杂化,暴露的方法可能分散在各个.Vue 文件中,不容易管理

方法 2(推荐,解决方法 1 的痛点)

1. 在 main.js 中把 Vue 对象暴露给 window

// ...
const vm = new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')
window.vm = vm // 只把vm暴露给window,以后都在vm中做文章
// ...

2. 在一个你喜欢的目录下新建 js 文件,该文件用来存放需要暴露出去的方法

(我是把这个文件放在了 @/utils/export2vmFunction.js 下)

exports.install = function (Vue) {
  // 把需要暴露出去的方法挂载到Vue原型上,避免了全局变量过多的问题
  // 全局方法都在这里,方便管理
  Vue.prototype.globalFn1 = function () {
    const component = findComponentDownward(this, 'RecommendRecord1')
    component.getDetail1()
  }
  Vue.prototype.globalFn2 = function () {
    const component = findComponentDownward(this, 'RecommendRecord2')
    component.getDetail2()
  }
  // ...
}

function findComponentDownward(context, componentName) {
  const childrens = context.$children
  let children = null
  if (childrens.length) {
    for (const child of childrens) {
      const name = child.$options.name
      if (name === componentName) {
        children = child
        break
      } else {
        children = findComponentDownward(child, componentName)
        if (children) break
      }
    }
  }
  return children
}

注:如果对上述找组件的方法不熟悉的小伙伴可以移步到:找到任意组件实例的方法

3. 把目光在回到 main.js 中,导入刚刚声明好的 js 文件

// ...
import Vue from 'vue'
import vmFunction from '@/utils/export2vmFunction'
Vue.use(vmFunction)
// ...

4. 大功告成

经过上述三步操作后,就可以用vm.globalFn1()来调用组件内的方法了

优点:

  • 方便管理: 所有方法都在一个文件中
  • 全局变量少: 只有vm一个变量

将方法绑定到window对象下,给app端调用

通过jsBridge方法,H5可以调用客户端(iOSAndroid)的内部方法,

同样,客户端也需要能调用H5页面里定义的js方法,

但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用,

原生调用h5方法必须定义在window对象下

mounted(){
    // 将scanResult方法绑定到window下面,提供给原生调用
    //(方法名scanResult是原生定义好的,扫描成功后会主动调用window下的该方法)
     window['scanResult'] = (val) => {
        this.getScanVal(val)
     }
},
methods:{
    //原生调用scanResult方法后执行getScanVal方法,获取到val
    getScanVal(val){
        console.log('扫一扫获取到的:'+ val)
    },
    
    //点击事件调取扫一扫功能
    doScan(){
        this.demo.doScan()//调用原生方法开启扫一扫
    },    
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue如何把组件方法暴露到window对象中

本文链接: https://lsjlt.com/news/167541.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue如何把组件方法暴露到window对象中
    目录把组件方法暴露到window对象中方法 1(简单,但不推荐)方法 2(推荐,解决方法 1 的痛点)将方法绑定到window对象下,给app端调用把组件方法暴露到window对象中...
    99+
    2024-04-02
  • Vue中如何给Window对象添加方法
    目录给Window对象添加方法为window对象添加事件处理程序给Window对象添加方法 大家都知道vue中所有元素都是作用于Vue实例的,可是我使用DCloud的Wap2App打...
    99+
    2024-04-02
  • 如何理解Kurbernetes中服务暴露方法
    本篇内容主要讲解“如何理解Kurbernetes中服务暴露方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何理解Kurbernetes中服务暴露方法”吧!由...
    99+
    2024-04-02
  • 如何将PHP对象数组保存到文件中?
    在PHP开发中,我们经常需要将对象数组保存到文件中,以便于后续的读取和处理。这篇文章将会介绍如何将PHP对象数组保存到文件中,同时提供相应的代码演示。 一、使用serialize()函数 PHP中提供了一个serialize()函数,可以将...
    99+
    2023-08-26
    对象 数组 文件
  • vue如何查找数组中符合条件的对象
    目录查找数组中符合条件的对象根据id找出数组里的对象查找数组中符合条件的对象 let val = 1; let list = [ {id:1,name:'张三'}, ...
    99+
    2024-04-02
  • Vue子组件内的props对象参数配置方法
    目录一、简单数据类型1、布尔类型 Boolean正确写法 :2、数字类型 Number正确写法 :3、字符串类型 String正确写法 :二、复杂数据类型1、数组 Array错误写法...
    99+
    2024-04-02
  • vue如何通过props方式在子组件中获取相应的对象
    目录方法一所以就可以直接拿取方法二有时候会获取不到,可以用一个定时器来获取方法三深拷贝方法四利用watch监听这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就...
    99+
    2024-04-02
  • 如何从面向对象思维理解Vue组件
    这篇文章主要讲解了“如何从面向对象思维理解Vue组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何从面向对象思维理解Vue组件”吧!什么是组件用面向对象...
    99+
    2024-04-02
  • JSON数组和JSON对象在vue中的获取方法
    这两天在学习vue,主要是为了实现前后端的分离,因此数据的传输是必不可少的一个环节。 为了快速入门,参考了vue官网的视频,这个过程由于引入vue.js的问题走了一些弯路,这个我们以...
    99+
    2024-04-02
  • 利用java如何实现把对象数组导出从Excel文件
    利用java如何实现把对象数组导出从Excel文件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、导入相关jar包,pom依赖如下: <dependency> ...
    99+
    2023-05-31
    java excel 对象数组
  • Vue中对组件二开的方法是什么
    这篇文章主要介绍“Vue中对组件二开的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中对组件二开的方法是什么”文章能帮助大家解决问题。一、背景在对antdv、element、自定义组...
    99+
    2023-07-06
  • 把各种对象(锁定)Pin到windows7系统任务栏中的方法
    Windows 7的超级任务栏可以锁定各种程序启动文件以及IE9的网页,让我们的日常操作更加简便,但想必还有更多人和小编一样,希望能把更多的东西锁到任务栏上,比如文件、文件夹之类的。只不过Windows 7不支...
    99+
    2023-05-31
    锁定 win7 任务栏 方法 对象 系统 任务 windows7
  • 如何在 PHP 中把一个数组转换为一个对象
    本文介绍了在 PHP 中把数组转换为对象的方法,包括类型转换、json_decode(函数)和 json_encode(函数)。 使用类型转换 使用 json_decode 和 jso...
    99+
    2024-02-27
  • Vue中如何对ElementUI的Dialog组件封装
    目录对ElementUI的Dialog组件封装.sync 修饰符说明总结对ElementUI的Dialog组件封装 1.子组件的写法 <el-dialog     title=...
    99+
    2023-03-11
    Vue ElementUI Dialog组件封装 Vue ElementUI封装
  • Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解
    目录前言一:利用索引直接改变arr的值 如我在button事件中写的(arr[0]=1000)二:直接修改数组的长度 如this.arr.length=3 总结如下前言 V...
    99+
    2024-04-02
  • ADO.NET 中如何使用Connection对象方法
    这篇文章将为大家详细讲解有关ADO.NET 中如何使用Connection对象方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1、Open法子ConnectionString 可选,字符串...
    99+
    2023-06-17
  • Vue Watch方法不能监听到数组或对象值的改变怎么解决
    这篇文章主要介绍了Vue Watch方法不能监听到数组或对象值的改变怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue Watch方法不能监听到数组或对象值的改变怎么解决文章都会有...
    99+
    2023-06-29
  • Vue中$emit $refs子父组件间方法如何调用
    这篇文章将为大家详细讲解有关Vue中$emit $refs子父组件间方法如何调用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、$emit子组件调用父组件的方法并传递数...
    99+
    2024-04-02
  • vue如何从组件外部调用方法
    小编给大家分享一下vue如何从组件外部调用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!从组件外部调用方法你可以通过给它一个从组件外部调用方法ref:<...
    99+
    2023-06-27
  • SpringBoot 如何从配置文件读取值到对象中
    目录一、实现方式@ConfigurationProperties 注解@Valid注解二、两者区别三、代码演示四、@PropertySource 读取指定配置文件五、@ImportR...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作