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

2019-04-13 21:48发布

站内文章 / 模拟电子
9985 0 1391
class="markdown_views prism-atom-one-light">

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

热门文章