slot 插槽

什么是slot？
在生活中很多地方都有插槽，电脑的usb，排插当中的电源插槽。
插槽的目的就是让原来的设备具有更多的扩展性，在vue中，组件的插槽也是为了让封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示了什么。

代码演示：此时有一个组件cpn，在vue的实例中使用了4次，但是4次的末尾都要展示不同的标签，如何实现？

源代码：

<body>
  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
      <h1>我是组件一</h1>
    </div>
  </template>
  <script> const app = new Vue({ el:"#app", components:{ cpn:{ template:"#cpn", } } }) </script>
</body>

修改之后的代码:

<body>
  <div id="app">
    <cpn><p>我是p标签</p></cpn>
    <cpn><span>我是span标签</span></cpn>
    <cpn><i>我是i标签</i></cpn>
    <cpn><s>我是s标签</s></cpn>
  </div>
  <template id="cpn">
    <div>
      <h1>我是组件一</h1>
      <slot></slot>
    </div>
  </template>
  <script> const app = new Vue({ el:"#app", components:{ cpn:{ template:"#cpn", } } }) </script>
</body>

如果想让slot标签中存有默认值，
只需要在<slot></slot>中加入默认的内容，如果在组件使用过程中，没有用到插槽，就会显示默认值，反之，会显示全部的新内容。

具名插槽

当组件中拥有多个插槽时，如果想对其中某个特定的插槽进行修改，具需要一种可以标识某个具体的插槽的功能。

<body>
  <div id="app">
    <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
      <slot><span>左边的</span></slot>
      <slot><span>中间的</span></slot>
      <slot><span>右边的</span></slot>
    </div>
  </template>
  <script> const app=new Vue({ el:"#app", components:{ cpn:{ template:"#cpn", } } }) </script>
</body>

可以给slot标签进行起名。

<template id="cpn">
    <div>
      <slot name="left"><span>左边的</span></slot>
      <slot name="center"><span>中间的</span></slot>
      <slot name="right"><span>右边的</span></slot>
    </div>
  </template>

在使用组件时，给需要使用的插槽一个原先起好的名字

<div id="app">
    <cpn>
      <template v-slot:center> <!--v-slot可以使用语法糖 “#”-->
        <span>标题</span>
      </template>
    </cpn>
  </div>

编译作用域

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译

如何理解呢?通过代码来理解，在vue实例以及子组件中都定义了isShow属性，实例中为true，子组件为false。如果v-show定义在了vue实例中的组件，查看组件中的内容是否显示。

<body>
  <div id="app">
    <cpn v-show="isShow"></cpn>
  </div>
  <template id="cpn">
    <div>
      <p>这是一个消息</p>
    </div>
  </template>
  <script> const app=new Vue({ el:"#app", data:{ isShow:true, }, components:{ cpn:{ template:"#cpn", data(){ return { isShow:false } } } } }) </script>
</body>

发现组件内的消息依然显示，说明定义在实例中组件的查找的属性依然是实例中的，而不是组件本身拥有的属性。

如果将v-show定义在组件模板中：

<template id="cpn">
    <div>
      <p v-show="isShow">这是一个消息</p>
    </div>
  </template>

页面就不再显示了，说明此时查找属性是在组件中寻找。

作用域插槽

内容参考：
官方文档对于作用域插槽介绍

父组件替换插槽的标签，但是内容还是由子组件提供

现在有一个需求：

子组件中包括一组数据，比如：pLanguages:[‘Javascritp’,’’]

需要在多个界面进行展示：

某些界面是以水平方向展示
某些界面以列表形式展示
某些界面直接展示一个数组

如何实现？

<body>
  <div id="app">
    <cpn></cpn>
    <cpn>
      <template v-slot="slotprops">
        <span v-for="item in slotprops.data">{{item}}-</span>
      </template>
    </cpn>
  </div>
  <template id="cpn">
    <div>
      <slot :data="pLanguages">
        <ul><li v-for="item in pLanguages">{{item}}</li></ul>
      </slot>
    </div>
  </template>
  <script> const app=new Vue({ el:"#app", components:{ cpn:{ template:"#cpn", data(){ return { pLanguages:['js','c++','java','c','python','GO'] } } } } }) </script>
</body>

ES6模块化的导入和导出

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 的模块化分为导出（export）与导入（import）两个模块

export使用

第一种方式：先定义赋值，后导出

let name ="张三";
let age = 18;
let flag = true;

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

export{name,age,flag}

第二种方式：

export let name ="张三";

导出函数/类

export function mul(){}; //导出函数
export Person{}; //导出类

export default

某些情况下，一个模块包含某个的功能，并不希望给这个功能命名，而且让导入者可以自己来命名，这时候就可以使用export default

但是在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
export default 中的 default 是对应的导出接口变量。
通过 export 方式导出，在导入时要加{ }，export default 则不需要。
export default 向外暴露的成员，可以使用任意变量来接收。

export default function(){
...};

导入的时候

import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收

import使用

格式：

import {} form "..."

import { flag } from "./Export.js";

if(flag){
  console.log("hhhhh");
}

如果希望某个模块中所有信息都导入，就使用 * 通配符，并且使用as 给* 起一个别名

import *  as aaa from "./Export.js";

aaa.name=xxx;

Vue.js知识——slot插槽、ES6模块化的导入和导出