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实例进行操作
     
    }
     
  • 相关阅读:
    MySQL query_cache_type 详解
    MySQL validate_password 插件
    MySQL冷备份的跨操作系统还原
    MySQL5.7新特性笔记
    MySQL参数详解
    保存mysql用户的登录信息到~.my.cnf文件;用于方便登录操作。
    MySQL应用层传输协议分析
    python egg
    MySQL 加锁处理分析
    train_test_split, 关于随机抽样和分层抽样
  • 原文地址:https://www.cnblogs.com/lxl0419/p/10790856.html
Copyright © 2011-2022 走看看