vue.js - vue中怎么引用外部JS中的变量？

问题描述

问 题

import customData from '../js/data.js';

data.js:

var customData = {
    userInfo : {
        admin : 'admin',
        pwd : 'admin',
        name : 'admin',
        icon : '../img/admin.png'
    },
    blog : {}
}

data.js里面应该怎么写，.vue中应该怎么引用？

解决方案

Data.js中定义了一个变量customData
在默认的Vue实例中返回一个customData的方法让他返回定义好的变量

var customData = 'mmp'
export default {
    customData: function(){
        return customData
    }
}

定义一个组件Data用import的方式将data.js引入进去
就可以通过导入的Data.customData()获得返回的变量customData并渲染到页面上

<template>
    <h1>{{ newData }}</h1>
</template>

<script>
import Data from './data'
export default {
    name: 'data',
    data:  function() { 
        return{
            newData : Data.customData()
        }
    } 
}
</script>

<style scoped>

</style>

页面渲染结果

这篇关于vue.js - vue中怎么引用外部JS中的变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！