Vue学习笔记-Day5 -slot插槽、模块化

day5 slot插槽、模块化

slot插槽

插槽是提高了组件的扩展性，组件本来是固定的内容，有了插槽，就可以为每个组件增加的特有元素。

1 基本使用

2 具命插槽

<div id="app">
<children1>
  <h1>我是修改值:{{msg}}</h1>
  <!-- 调用具名插槽的使用方式1 slot='left' -->
  <h2 slot="left">我是左边插槽修改值</h2>
  <!-- 调用具名插槽的使用方式1 注意如果要写成 v-slot的形式的话，只能和template连用 -->
  <template v-slot:center>
    <h1>Here might be a page title</h1>
  </template>
  <template #right> 
  {{cmsg}}
  </template>
</children1>
</div>

3 作用域插槽

这里理解一个概念，什么是作用域？

指父级模板里面的所有内容都是在父级作用域里面编译的，子模板的所有内容都是在子级作用域里面编译的。

写在父组件中的所有数据，属于父组件的作用域，比如下面代码中的 msg，虽然内容写在子组件中用来代替插槽的内容，但是msg的是属于父组件的数据参数。

<div id="app">
<children1>
 {{msg}} //这里的参数必须是父组件的，如果是子组件的话，会报错
</children1>
</div>

那么，如果我们想在插槽处使用子组件的数据，应该如何做呢？

//子组件
<template id="children1">
  <div>
    <slot :language="planguage">//将数据绑定在标签中
 	</slot>
  </div>
</template>

//父组件
<children1>
  <template v-slot:default="slotProps">//通过v-slot获取 
    {{slotProps.language}}
  </template>
</children1>

上面的是默认插槽的做法，v-slot:default=“”可以缩写围殴v-slot=”“，那么如果是具名插槽呢？

//为插槽命名
<slot name="left" :language="planguage">
      <h1>右边插槽</h1>
</slot>  
//通过 v-slot:name=""获取
<template v-slot:left="slotProps"> 
    {{slotProps.language}}
 </template>

对于 具名插槽只能使用完整的模板，不能缩写，template v-name=“slotProps”

3 解构插槽：由于插槽的原理是将插槽内容包括在一个传入单个参数的函数里，所以v-slot可以是任何任何定义函数参数的js表达式。

<books v-slot="{user}"></books>
<books v-slot="{user:person}"></books>
<books v-slot="{user={firstName:'Guest'}}"></books>//给默认值

4 具名插槽的语法糖： #name

模块化

1 为什么要模块化

解决全局作用域的污染、依赖不明显等问题。随着前端功能的复杂化，我们所写的js代码也越多，很多时候，为了页面简单明了，可能需要将页面中的js代码抽出来，生成js文件，当页面需要的时候进行引入。但是越来越多的js文件生成，可能会导致变量名或者函数名的重复定义，互相干扰。

那么，怎么能解决这个问题呢？我们知道，函数是有局部作用域的，所以将这些js代码写在一个函数里面，然后再调用函数，只要函数名不重复的情况下就可以避免自变量之间的互相影响问题。于是最开始的JS开发者通过使用modules设计模式来解决JS全局作用域污染问题。下面列一个简单的module：

var peopleModule = (function(){ //定义函数保证局部作用域
  var name = 'lf'
  var age = 22
  function sum(num1,num2){
    return num1+num2;
  }
  return {name,sum}; //返回对象，暴露哪些参数和函数可以让外部使用
})();

这个是最早期的module，利用匿名函数（闭包）来解决全局污染的问题，通过自定义暴露行为来区分私有成员和公有成员。

2 常见的模块化规划

模块化的核心就是导入导出，所以介绍下面几个模块化的导入导出

CommonJS：主要用在Node开发上面，每一个文件就是一个模块，都有属于自己的作用域。

CommonJS是的编译本质是沙箱编译，通过require进来的JS模块会被Module模块注入一些变量，使用立即执行函数编译。由于CommonJS基于Node原生的API在服务端可以实现模块同步加载，但是仅限于服务端，客户端如果想要加载的话，消耗太大。

//导出
var name = 'lf'
var age = 22

function sum(num1,num2){
  return num1+num2;
}
module.exports = {
  name,age,sum
}

//引入
let mo = require('./main.js');
let name = mo.name;
let age = mo.age;
let sum = mo.sum;
//简写为
let {name,age,sum} = require('./main.js')

AMD：全称 asynchronous（[eɪˈsɪŋkrənəs]） module definition，异步模块定义，是由Require JS在推广过程中对模块定义的规范化的产出。采用异步加载的方式，不会影响后面语句的执行，该模块有一个回调函数，当模块加载完成的时候，这个回调函数才会执行。

define(id,[depends],callback)//定义模块
require([module],callback) //加载模块
require.config()//指定引用路径

define([a,b,c],function(a,b,c){//提前声明所有初始化需要用到的模块
    a.doSomething();
    b.doSomething();
})

优点：能够异步、并行加载模块

缺点：不能按需加载，开发成本太大

CMD：common module define，是seaJs在推广过程中诞生的代码规范，区别于AMD的依赖前置，提前执行 ，CMD推崇依赖就近（按需加载），延迟执行，并且api功能单一，一个模块干一件事

define(function(require，exports,module){
    var a = require('./main.js')//按需引用
    a.doSomething();
})

ES6的Modules：

ES6的module输出的是对值得引用，而模块化规范输出得是对值得拷贝

ES6是编译时输出接口，而模块化规范是运行时加载

模块化规范输出得是一个对象，只有当脚本加载完成的时候才会生成，而ES6 module不是对啊ing，是一个多对象输出，多对象加载的原型

//导出
var name = 'lf'
var age = 22

function sum(num1,num2){
  return num1+num2;
}

export {name,age,sum}

//导入
import {name,age,sum} from  './main.js'

如果 在导出的时候，是以 export default {}的形式，则在导入的时候，不需要大括号括起来，直接定义一个变量来接收，即： import people from ‘./main.js’

关于导入，如果变量太多，可以 通过 import * as person from “./main.js”

目前很多浏览器都不支持ES6的import，所以需要使用babel来将inport编译成require