在模板(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!
Logo

前往低代码交流专区

更多推荐