2. slot插槽

2.1 什么是插槽？

插槽是vue里面的重要机制，在封装组件时可以预留一个内容出口，允许在父组件中调用时传入想要的内容

2.2 匿名插槽

没有名字的插槽，直接将子组件标签对中的所有内容放在子组件内部去使用

第一步：在子组件中写插槽标签

<template>
    <div>
        用户名：<input type="text"/>
        <!-- 1. 匿名插槽，没有名字的插槽 -->
        <slot></slot>
    </div>
</template>

第二步：在父组件中调用子组件时，在标签对中写内容，作为插槽的内容

<my-input>
   <h1>我是标题</h1>
</my-input>

2.3 具名插槽

具名插槽就是有名字的插槽

第一步：在父组件中使用子组件时，传入有名字的插槽

<my-input2>
    <h1 slot="top">上边的内容</h1>
    <h1 slot="middle">中间的内容</h1>
    <h1 slot="bottom">尾部的内容</h1>
</my-input2>

第二步：在子组件中，使用名字进行对应

<!-- 2. 具名插槽，有名字的插槽 -->
<slot name="top">上边</slot>
<slot name="middle">中间</slot>
<slot name="bottom">下边</slot>

2.4 作用域插槽

作用域插槽：将子组件中的数据，在父组件中插槽标签上使用

第一步：在子组件中定义数据，以属性方式声明数据

<slot name="header" :un="username" :age="age">默认值</slot>

export default {
    data(){
        return {
            username:'刘备',
            age:30,
        }
    }
}

第二步：在父组件中调用子组件时，可以通过作用域插槽使用数据

<h1 slot="header" slot-scope="scope">我的标题，姓名：{{scope.un}}，年龄：{{scope.age}}</h1>

2.5 v-slot指令

v-slot指令，可以简化插槽的写法

 <my-input3>
     <!-- 作用域插槽写法 -->
     <h1 slot="header" slot-scope="scope">姓名：{{scope.un}}，年龄：{{scope.age}}岁</h1>

     <!-- v-slot指令 -->
     <!--
    <template v-slot:header="scope">
        <h1>Hello world...姓名：{{scope.un}}，年龄：{{scope.age}}岁</h1>
    </template>
    -->

     <!-- 缩写成 # -->
     <template #header="scope">
         <h1>姓名：{{scope.un}}，年龄：{{scope.age}}岁</h1>
     </template>
</my-input3>

3. ElementUI框架

3.1 什么是ElementUI？

ElementUI是饿了么公司开放出来的基于Vue2的桌面端组件库，有很多组件直接使用，不用自己写

官方网站：https://element.eleme.cn/#/zh-CN/

3.2 安装使用ElementUI

第一步：安装ElementUI组件库

yarn add element-ui
npm i element-ui

第二步：在 main.js 中引入 ElementUi 组件

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

第三步：找到想要的组件，复制粘贴