Vue学习-使用文件存储变量名称

前端 Vue

创建时间:2023-01-18 20:17

阅读:

1.简介
 2.使用方式
 3.调用变量值
 4.调用函数
 5.完整的代码
 6.显示滚动条

1.简介

项目中有的函数或者变量值会被多个组件用到，如果都写在每个组件中，后续如果函数或者变量值有变化，维护起来就不方便。
此时我们可以把这些通用的函数或者变量值存放在一个xxx.js文件中，然后进行调用

2.使用方式

2.1 先在pages目录下(写页面的目录)创建一个 xxx.vue的文件，用来调用调用公共的函数或变量值，这里的文件名为：use_value_method.vue
2.2 在pages目录下(其它地方也可以)创建一个 xxx.js的文件，用来存放公共的函数和变量值，这里文件名为：putconstant.js

3.调用变量值

3.1 先在putconstant.js文件中定义，然后需要在export default中进行变量名暴露
例如：
let Dict1_Url = {
    url_prefix: "http://127.0.0.1:8082",  // 项目地址1
    // url_prefix: "http://127.0.0.1:6000" // 项目地址2
    }

let Dict2 = {
    url1: "https://www.baidu.com/",
    url2: "https://www.baidu.com/"
 }

let Name = "小明"
let Age = 18

// 将变量暴露出去
export default {
    Dict1_Url,
    Dict2,
    Name,
    Age,
}

3.2 来到use_value_method.vue文件中,去使用刚才定义的变量值，
    我们需要导入putconstant.js文件的路径，然后暴露出来的内容都存放在一个字典类型中
    所以我们可以随便起一个要导入的内容名称（这里是dict1），然后再通过字典的Key值去获取对应的Value值

例如:
<script>
import dict1 from './putconstant';

export default {
    name: '',
    mounted(){
            console.log(dict1)
            console.log("姓名："+dict1.Name)
            console.log("年龄："+dict1.Age)
            console.log("项目地址："+dict1.Dict1_Url.url_prefix)
            console.log("百度地址："+dict1.Dict2.url2)
    },
}
</script>

4.调用函数

4.1 现在putconstant.js文件中定义,直接在函数名前加 export ，就可以将函数暴露出去;
    或者跟变量一样，将函数名写进 export default 中
    例如：

    export const pageTips = (message) => {
        console.log(message)
    }
    
    export const pageTips2 = () => {
        console.log("我被调用了")
    }
    
    export const Login = (username1, password1) => {
        axios({
            url: "http://192.168.255.10:8081/other/test/login",
            method: 'post',
            data: {
                username: username1,
                password: password1
            }
        }).then((res) => {
            if (res.data.result == "success") {
                console.log("登录成功")
            }
        })
    }

4.2 来到use_value_method.vue文件中,去使用刚才定义的函数名；
    我们需要导入putconstant.js文件的路径，然后在括号中写入需要导入的函数名，导入的函数名必须是存在的，不能乱写
    
    例如：
    <script>
    import {pageTips,pageTips2,Login} from './putconstant';
    
    export default {
        name: '',
        mounted(){
            pageTips("调用函数")
            pageTips2()
            Login("aa","bb")
        },
    }
    </script>

5.完整的代码

putconstant.js文件

use_value_method.vue

执行结果

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。