zoukankan      html  css  js  c++  java
  • vue页面引入外部js文件遇到的问题

    问题一:vue文件中引入外部js文件的方法

    //在vue文件中
    <script>
    import * as funApi from '../../../publicJavaScript/publicFun.js';//这里如果有多个方法的话也引用一次就可以了
    //import {test,test2,test3} from '../../../publicJavaScript/publicFun.js';//这样如果引用的方法比较多的话就会比较麻烦,而且不美观

    export default {
      name: '',
      props: [''],
      data() {},
      
      methods: {
        lazyLoad(){
          funApi.test();
        }
      }
    }
    </script>

    //在外部publicFun.js文件中
    function test(){
      alert(1)
    }

    export{
      test,//将方法暴露在外部,以便被其他文件引用
    }





    问题二:首先引入外部js文件,并且可以在外部js文件调用vue文件内的方法
    export default {
       data() {
           return {
               title: '哈哈',
           }
       },
        mounted() {
            // methods里面定义的方法, 暴露到window下
           window.test= this.test;
        },
        methods: {
            test() {
               console.log(‘1’);
            },
        }
    }

    这样就可以在外部js文件通过调用test() 来调用 vue 的methods 中的 test()方法了
    问题三:在js的外部文件内,可以使用this指向vue文件内的 vue实例

    vue内的methods里面的方法
    update(e) { let _this
    = this funApi.funUpdate(_this) }

    外部js内的方法
    function funUpdate(this) {
     
       this.modal2.flag = false //这里this就是vue文件内的this,可以直接指向vue实例进行操作
     
    }
     
  • 相关阅读:
    word文档的图片怎么保存到Web编辑器上
    如何在linux下查看gpu信息

    lua注释
    readDouble
    ..在lua中运用
    C++条件分支结构
    C++条件分支结构
    Flink基础(十六):Table API 和 Flink SQL(一)整体介绍
    Flink基础(十四):DS简介(14) 搭建Flink运行流式应用
  • 原文地址:https://www.cnblogs.com/lxl0419/p/10790856.html
Copyright © 2011-2022 走看看