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实例进行操作
     
    }
     
  • 相关阅读:
    1822. Sign of the Product of an Array
    1828. Queries on Number of Points Inside a Circle
    1480. Running Sum of 1d Array
    C++字符串
    Git&GitHb学习记录
    54. Spiral Matrix
    104. Maximum Depth of Binary Tree
    110. Balanced Binary Tree
    136. Single Number
    19、泛型入门
  • 原文地址:https://www.cnblogs.com/lxl0419/p/10790856.html
Copyright © 2011-2022 走看看