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实例进行操作
     
    }
     
  • 相关阅读:
    [Swift]学习笔记----变量不会被默认初始化
    Swift学习笔记1---变量和元组
    mac下安装node.js步骤
    注意clear的属性
    覆盖css类样式,必须注意css类名前缀的一致
    span 文字垂直居中
    css3 实现元素水平和垂直居中
    IOS 长按默认事件阻止 【坑】
    提高javascript编码质量-68-1
    js 柯里化
  • 原文地址:https://www.cnblogs.com/lxl0419/p/10790856.html
Copyright © 2011-2022 走看看