【vue 2.0 学习】杂记（ES6模块化/箭头函数/vue组件的props）

这个笔记整理了今天在模仿项目的过程中发现的一些零碎的理论点，就目前的掌握程度来说，我觉得这种边模仿边查边理解的套路比较适合我这种”菜鸟”。

今天主要学习的是这个博客的实战系列，推荐一下～

---

ES6: 使用export和import实现模块化

支持模块化是ES6的新特性，模块化的思想在python中很常见了，多门语言之间可以进行对比理解，效果杠杠的～

ES6的模块化的基本规则或特点

1. 每个模块只加载一次，每个JS只执行一次，如果下次再去加载同目录下的同文件，直接从内存中读取。一个模块就是一个单例，或者说是一个对象；
2. 每个模块内声明的变量都是局部变量，不会污染全局作用域；
3. 模块内部的变量或者函数可以通过export导出；
4. 一个模块可以导入别的模块。

一个小小的例子展示一下用法：

//lib.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
export function square(x) {
    return x * x;
}
//导出函数
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//main.js
import { square, diag } from './lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

几种import、export方式

• 使用export {接口} 导出接口，大括号中的名字为定义的变量或者函数，import和export需要对应；
• 在export时使用as为变量函数，添加别名；
• 在定义处直接导出；
• 匿名：不需要知道变量或者函数名称，直接把开发接口给export

如果一个JS模块文件只有一个功能，就可以使用export default导出；

这个感觉不是那么具体，还是来个栗子理解一下：

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

• export也能默认导出函数，在import 的时候名字随便写（可以这么做的原因是，每个模块的默认接口就只有一个）；

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

• 使用通配符* 重新导出其他模块的接口。

最近才知道还有ES6这种神奇的东西，JS还没弄懂，东西好多哦～

---

ES6：箭头函数

这个箭头函数也是ES6的新特性，也是我感觉很新鲜的东西，我觉得这个不太好理解，可能还是不太习惯，所以看看博文，整理一下～

目的

更简洁的语法和与父作用域共享关键字this。

使用场景

• 使用非箭头函数来处理由object.method()语法调用的方法（因为它们会接收到来自调用者的有意义的this值）；
• 在其它场合都使用箭头函数。

语法

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

---

Vue组件选项: props

vue.js之props传递参数浅析

一张图理解父子组件和props的关系

在 Vue 中，父子组件的关系可以总结为 props down, events up。
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息，从实际来讲就是：要让子组件使用父组件的数据，需要通过子组件的 props 选项。

静态props

• 子组件要显式地用 props 选项声明它期待获得的数据:

var childNode = {
  template: '<div>{{message}}div>',
  props:['message']
}

• 静态Prop通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的。
• 命名规则：（有点晕，写的时候记得对应几遍就知道了）

在父级HTML模板中声明props属性时，属性名需要使用中划线写法；
而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法。

动态props

在模板中，要动态地绑定父组件的数据到子模板的 props，用 v-bind。
每当父组件的数据变化时，该变化也会传导给子组件。

var childNode = {
  template: '
{{myMessage}}
',
  props:['myMessage']
}
var parentNode = {
  template: `
  
class="parent">
    "data1">
    "data2">
  
`,
  components: {
    'child': childNode
  },
  data(){
    return {
      'data1':'aaa',
      'data2':'bbb'
    }
  }
};