vue——45-webpack打包vue-向模块传递参数（ export ）

在模板（login.vue）的业务逻辑块向外暴露成员

模板块：

<template>
    <!--模板块-->
    <div>
        <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
        <button @click="show">点击我</button>
    </div>
</template>

业务逻辑块

<script>
    // 业务逻辑块
    export default {
        data() {
            // 注意：组件中的 data 必须是 function
            return {
                msg: '我是data中的数据'
            };
        },
        methods: {
            show() {
                this.msg = this.msg + ' --- ' + '调用了 login.vue 中的 show 方法';
            }
        }
    }
</script>

至此，模块中就渲染传入的参数了

关于 export ：

在 test.js 中写入：

let info = {
    name: 'bob',
    age: 20
};

export default info;
// export default info;//报错

// 注意：export default 向外暴露的成员，可以使用任意的变量来接收
// 注意：在一个模块中，export default 只允许向外暴露一次
// 注意：在一个模块中，可以同时使用 export default 和 export 向外暴露成员

export var title='tom';
export var content='hello world!';
// 注意：使用 export 向外暴露的成员，只能使用 { }
// 的形式接收成员名，这钟形式叫做 按需导出；
// 注意：export 可以向外暴露多个成员，同时如果某些成员，
// 我们在 import 的时候，我们可以不在 { } 中定义；
// 注意：使用 export 导出的成员，必须严格按照导出时候的名称，来使用 { } 按需接收；
// 注意：使用 export 导出成员，如果想换个名称来接收，可以使用 as 来起别名；

用 main.js 接收并渲染给页面：

import login from './login.vue'

import test, {title as tit, content} from './test.js';

console.log(test); // {name: "bob", age: 20}
console.log(tit); // tom
console.log(content); //hello world!