前言

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，第二个参数为对象。对象中和第一种方式一样，添加对象、字符串、数字、箭头函数等......

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

第三种方式

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

        () => {
             let obj = {
               a: function () {},
               b: function () {},
               c: function () {}
             }
             Object.keys(obj).forEach((key) => {
               window[key] = obj[key]
             })
           }
         )()

第四种方式

使用构造函数来实现效果，先创建一个函数再其函数的原型上添加对应的属性方法，再将其赋值给在window自定义的属性上

      function All() {}
 
      All.prototype = {
        a: function () {},
        b: function () {},
        c: function () {}
      }
      window.func = new All()
     // 其实和第一种差不多 只是使用的构造函数，最终也是直接对window进行添加

第五种方式

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

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

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

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

    exports.install = function (Vue) {
      // 把需要暴露出去的方法挂载到Vue原型上，避免了全局变量过多的问题
      // 全局方法都在这里，方便管理
      Vue.prototype.username = function () {
           alert('整天想死的鱼')
      }
      ......
    }

把目光再回到 main.js 中，导入刚刚声明好的 js 文件

    import Vue from 'vue'
    import vmFunction from '@/utils/export2vmFunction' // 这个为步骤2所创建的文件
    Vue.use(vmFunction)

最后就可以直接在全局组件内使用username方法了

总结

直接对window赋值
jq的extend方法
js文件方法
构造函数方法
vue中全局挂在方法

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

前言

第一种方式

第二种方式

第三种方式

第四种方式

第五种方式

总结