vue export default 和 export const的使用

vue的经常会见到 export const 和export default 这两个,都可以用于从模块中导出函数、对象或原始值，以便在其他文件中可以使用，他们的区别在于

1、export default 一个文件中只能有一个，名字叫默认导出
2、export const一个文件中可以有好多个，名字叫命名导出

一、先来看看export default的定义和使用，我在components文件夹下创建了一个自定义组件ProductList.vue，里面只有export default，代码如下

<template>
    <div>
        <h1>{{name}}</h1>
        <div v-for="item in productList">
            <div>
                <span>产品名称：</span>
                <span>{{item.name}}</span>
            </div>
            <div>
                <span>产品价格：</span>
                <span>{{item.price}}</span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                
            }
        },
        props : {
            name: {
                type: String,
                default: ''
            },
            productList : {
                type : Array,
                default: []
            }
        }
    }
</script>

现在我们在First.vue中使用，引入方法为

import ProductList from '@/components/ProductList'

并在components中声明

export default {
	components: { 
      ProductList 
    }
}

然后便可以使用组件了，使用组件代码如下

<template>
    <div>
        <ProductList :name="name" :productList="productList"></ProductList>
    </div>
</template>

在data中随便定义name和productList属性供ProductList组件使用

data() {
    return {
        name:'购物清单',
        productList:[
            {
                name : '飘柔洗发水',
                price: 19.9
            },
            {
                name : '晨光签字笔',
                price: 1.5
            }
        ]
    }
}

页面上输出结果如下所示

二、接下来看一下export const的使用，在First.vue中导出对象、方法和变量

export default {
    components:{
        ProductList
    },
    data() {
        return {
            name:'购物清单',
            productList:[
                {
                    name : '飘柔洗发水',
                    price: 19.9
                },
                {
                    name : '晨光签字笔',
                    price: 1.5
                }
            ]
        }
    }
}
    
export const str2 = '我是First.vue中的str2'
export const student = {
	name:'张三',
	age: 27,
	address:'上海'
}
export const student2 = {
	name:'李四',
	age: 27,
	address:'北京'
}
export const printName = function(){
	console.log('printName方法中打印First.vue'); 
}

接下来在HelloWorld.vue中使用导出的变量，首先使用import命令引入

import {str2 , student , student2 , printName} from '@/components/First'

接下来就可以直接使用了

mounted(){
    console.log(str2);
    console.log(student.age);
    console.log(student2.age);
    printName();
}

浏览器控制台输出结果如下

js文件中导出也是一样的，在demo.js文件中定义一个message变量，内容如下

export const message = '来自demo.js的文本！'

然后在HelloWorld.vue中使用导出的变量，首先使用import命令引入

import {message} from '@/js/demo'

接下来就可以直接使用了

mounted(){
    console.log(str2);
    console.log(student.age);
    console.log(student2.age);
    printName();
	console.log(message);	// 打印demo.js中的变量
}

浏览器控制台输出结果如下