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

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

把组件方法暴露到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()
  }
  // ...
}
/**
 * 由一个组件，向下找到最近的指定组件
 * @param {*} context 当前上下文，比如你要基于哪个组件来向上寻找，一般都是基于当前的组件，也就是传入 this
 * @param {*} componentName 要找的组件的 name
 */
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可以调用客户端（ios，android）的内部方法，

同样，客户端也需要能调用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()//调用原生方法开启扫一扫
    },
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中的dom节点和window对象

    vue中的dom节点和window对象

    目录 window对象 dom元素 获取dom节点的3种方式 方式一:(事件源) 方式二:(使用ref) 方式三:(自定义全局指令) window对象 首先window对象是浏览器下的默认对象,也就是全局对象,在没有明确指向的时候this指向window.即使切换路由,window对象里面的属性和方法依旧会保留.因此可以在控制栏直接输入this.window.self都可以直接打印window对象.window对象很很多默认的方法和属性. 一切全局变量和方法都是window的属性和方法,也就是只

  • vue项目中销毁window.addEventListener事件监听解析

    目录 销毁window.addEventListener事件监听 window.addEventListener监听scroll事件 解决办法 使用throttle出现的新问题 最后代码 销毁window.addEventListener事件监听 今天在做项目的过程中,组件中调用iframe时,由于在组件的created方法中写了监听,用于接收iframe发来的信息,但是在组件销毁的时候并没有去掉监听,导致组件创建几次,监听方法就会执行几次,特此记录 created() {     window

  • Vue中如何给Window对象添加方法

    目录 给Window对象添加方法 为window对象添加事件处理程序 给Window对象添加方法 大家都知道vue中所有元素都是作用于Vue实例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是该事件只能绑定Window下的方法,所以此时就需要在Vue中定义一个方法,并将其绑定在Windows对象下 首先在 App.vue methods 中定义一个方法 methods:{     share(){         //微信分享

  • vue如何使用window.open打开页面并拼接参数

    目录 使用window.open打开页面并拼接参数 使用window.open()参数详解 1.window.open()有三个参数 2.举例说明 3.第二个参数详解 4.第三个参数详解 使用window.open打开页面并拼接参数 window.open常用来在项目中链接外部网站,接收三个参数 1.strUrl,要打开的页面或资源的url地址 2.strWindowName,窗口的名字,用于后续对该窗口的引用,不是窗口的标题.该参数除了支持普通的名字外,还支持和a标签一样的特殊关键字:_sel

  • 教你利用Vue3模仿Windows窗口

    教你利用Vue3模仿Windows窗口

    目录 一.前言 二.功能分析 三.指令封装 四.通用组件封装 五.总结及其源代码参考 六.博文参考 一.前言 Vue3终于在2022年2月7日正式发布了,之前用vite+vue3搭了一个小demo,资料太少而我太菜了,所以一直不敢用Vue3搭新项目,现在随着Vue3正式版本的发布,而且相关配合的子项目库也已经完善,大量的翻译资料和文献都已经可以百度到了,再加上领导支持用Vue3新框架,所以我在新项目上着手用vue-cli(@vue/cli 4.5.9)脚手架搭建Vue3项目. 图1 拖拽窗体效果

  • vue中window.addEventListener(‘scroll‘, xx)失效的解决

    目录 window.addEventListener(‘scroll‘, xx)失效解决 window.addEventListener scroll在移动端无效问题 window.addEventListener(‘scroll‘, xx)失效解决 多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true) window.addEventListener scroll在移动端无效

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

    目录 把组件方法暴露到window对象中 方法 1(简单,但不推荐) 方法 2(推荐,解决方法 1 的痛点) 将方法绑定到window对象下,给app端调用 把组件方法暴露到window对象中 方法 1(简单,但不推荐) mounted() {   // 2. 在mounted阶段声明globalFn,来调用组件内的方法   window.globalFn = () => {     this.getDetail()   } }, methods: {   // 1. 组件内有一个getDeta

  • Vue/React子组件实例暴露方法(TypeScript)

    目录 Vue2 Vue3 React 最近几个月都在用TS开发各种项目,框架有涉及到Vue3,React18等:记录一下Vue/React组件暴露出变量/函数的方法的写法: Vue2 回顾一下Vue2 组件暴露出去方法,它并没有约束,写在methods里的方法都能被调用,data里的变量也能被接收: 现拉一个vue 2.6.10的模板下来子组件的数据 父组件获取子组件实例,调用子组件方法等: 控制台输出: 这个输出的子组件实例里包含所有的变量和方法: Vue3 组件通过vue3提供的define

  • 详解vue引入子组件方法

    前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法. 1.第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2.第二步,例子是在hom.vue界面引入子组件header.vue,如下图 3.第三步,给子组件header.vue命名一个全局的id, export default { name: 'HomeHeader' } 代码如下图 4.第四步,返回home.vue组件,引用header.vue组件代码如下图 HomeHeader 对应

  • vue+swiper实现组件化开发的实例代码

    swiper的组件 <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt="">&l

  • javascript类型系统 Window对象学习笔记

    window对象是Web浏览器中javascript的一个终极兜底儿对象,在作用域中处于最末端,是一个包含所有对象的对象.所有在全局作用域中定义的属性和函数都是window对象的属性 var myStringVar = 'myString'; var myFunctionVar = function(){}; console.log('myStringVar' in window);//true console.log('myFunctionVar' in window);//true 1.引用

  • JS window对象的top、parent、opener含义介绍

    1.top该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. 2.openeropener用于在window.open的页面引用执行该window.open方法的的页面的对象.例如:A页面通过window.open()方法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作. 3.parentparent用于在iframe,frame中生成的子页面中访问父页面的对象.例如:A页面中有一个ifra

  • Javascript window对象详解

    Javascript window对象详解

    首先看我们的源代码. 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8" />          <title>深入理解Javascript</title>          <script type="text/javascript" charset="utf-8"

  • Java Scanner对象中hasNext()与next()方法的使用

    Java Scanner对象中hasNext()与next()方法的使用

    目录 Scanner对象中hasNext()与next()方法 输入hasNext()和hasNextLine()方法的区别 Scanner对象中hasNext()与next()方法 相信很多像我一样在刚刚接触Java的时候都有遇到这样的问题: 我们可能希望的是:先输出"请输入:"然后我们就可以在控制台输入一个字符串或数字. 但是,事实却是:控制台要我们先输入,输入后才显示"请输入:". 这是怎么回事? 原因: 首先,sc.hasNext()和sc.next()都可

  • vue实现图片加载完成前的loading组件方法

    如下所示: <template> <img :src="url"> </template> <script> export default { props: ['src'], // 父组件传过来所需的url data() { return { url: 'http://www.86y.org/images/loading.gif' // 先加载loading.gif } }, mounted() { var newImg = new Im

  • vue.js Table 组件自定义列宽实现核心方法

    目录 前言 colgroup 和 col 核心实现 一些常量/变量定义 初始化表头列表 initColumns 处理含有固定宽度和最小宽的列 获取各列宽度,并组成一个数组 getWidthList 计算需要自适应的列宽度 getAdaptWidth 监听屏幕变化和属性更新 前言 如果你使用过类似于 ElementUI 的组件库,一定对如下的 API 属性不眼生,例如: <!-- Element UI --> <el-table-column prop="date" l

随机推荐