vue中给window对象上添加属性的方法

web页面通讯方法、window.open打开新页面,父子页面通讯的方法最直接的就是获取对方的window对象进行调用父子各自得属性及方法。 下面是整理的几种通讯得方法仅供参考

第一种

      // 第一种方法   直接对window进行添加

        -----箭头函数-----
      window.callAnswer = (value) => {
        this.callAnswer(value) // 传参数
      }
      window.hangUp = () => {
        this.hangUp() // 不传参数
      }

        -----普通函数-----
      window.callAnswer = function (value) {
        return this.callAnswer(value) // 传参数
      }
      window.hangUp = function () {
        return this.hangUp() // 不传参数
      }


      添加对象、字符串、数字等......都可以
      window.age = 18
      window.name = '小张'
      window.name = { name: '小张', age: 18 }
      ......

第二种

      //第二种方法    使用jquery进行编程可以使用jq得extend方法


      $.extend(window, {
        a: function () {},
        b: function () {},
        c: function () {}
      })

      这中和之前的一样,添加对象、字符串、数字、箭头函数等......

第三种

        // 第三种方法  就是单独建立一个js文件引入执行
        () => {
             let obj = {
               a: function () {},
               b: function () {},
               c: function () {}
             }
             Object.keys(obj).forEach((key) => {
               window[key] = obj[key]
             })
           }
         )()

         这种方法就是将需要添加的属性统一放在一个js文件中,创建一个对象,
         在使用Object.keys方法将其转换成一个给定对象的自身可枚举属性组成的数组,
         进行forEach循环添加赋值。
        
         看着高级一点

第四种

      // 第四种方法  构造函数
        
        
      function All() {}

      All.prototype = {
        a: function () {},
        b: function () {},
        c: function () {}
      }
      window.func = new All()

先创建一个函数再其函数的原型上添加对应的属性方法,再将其赋值给在window自定义的属性上

第五种

将其vue的实例赋值给一个变量来接受 再将其直接挂载到window上,在新建一个js文件,把需要暴露出去的方法挂载到Vue原型上,避免了全局变量过多的问题。而且在这里进行统一全局管理。之后再main,js中进行import 引入这个js文件。将其挂载到vue实例上,就可以直接全局使用了。

第五种方法详细教程请参考下面这篇文章

  vue 把组件方法暴露到window对象中_王乔治威尔金斯玛格丽特汤姆森希尔德萨拉阳的博客-CSDN博客_vue暴露方法到window

文章结束,感谢阅读。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值