vue——45-webpack打包vue-向模块传递参数（export）在模板（login.vue）的业务逻辑块向外暴露成员
模板块：
<template>
<!--模板块-->
<div>
<h1>这是登录组件，使⽤ .vue ⽂件定义出来的 --- {{msg}}</h1>
<button @click="show">点击我</button>
</div>
</template>
webpack打包流程 面试业务逻辑块
<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!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。