Vue学习笔记（四）

目录

插槽v-slot：（简写# ）

 element-plus（实战项目中常用，组件封装库）

有两种引入方式：

使用插槽给Tabs标签页增加图标

插槽v-slot：（简写# ）

使用插槽是在存在父子关系的组件，可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息。

插槽作用类似于电脑主板上的一个万能插槽，位置固定，但可以插入各种外置设备，插入什么设备有对应的功能。

默认插槽

具名插槽：对应的插入内容

动态插槽

App.vue：

<template>
  <div>
    <A>
      <!-- 这是插入的内容 -->
      <!-- 默认插槽 -->
      <template #default>
        <div>这是默认插槽的内容</div>
      </template>

      <!-- 具名插槽 -->
      <template #main>  <!--v-slot简写-->
        <div>这是给main插入的内容</div>
      </template>
      <!-- 动态插槽 -->
      <template #[name]>
        <div>这是给footer插入的内容</div>
      </template>
    </A>
  </div>
</template>
<script setup>
import A from './components/A.vue'
import { ref} from 'vue';
const name=ref('footer')
</script>

<style></style>

A.vue:

<template>
    <div>
      <header>
        <slot></slot>
      </header>
      <main>
        <slot name="main"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>
  <script setup>
  import { ref} from 'vue';
  
  </script>
  
  <style></style>

 效果：

 element-plus（实战项目中常用，组件封装库）

有两种引入方式：

1.全局引入：缺点：打包体积过大

2.按需引入：用什么引入什么，正常公司开发的时候，都会用的一种方式

element plus官网：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

1.安装，如果 pakage.json或node_modules中，则说明安装成功

           

 2.按需引入

按照官网教程，配置vite.config.js（基于vite创建，使用js）

 将需要使用样式写入template

 效果：（其他样式可以参考官网）

使用插槽给Tabs标签页增加图标

1.安装字体图片插件（官网命令）

2.在mian.js中添加（官网教程）

使用：

1.将Tabs标签页代码复制到App.vue<template>中

2.可以通过具名插槽来插入图标，tab-plane属性为label，插槽绑定label

         

 通过模板引入图标（官网教程）

<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
  </div>
</template>

代码实例：

<template>
   <div class="app">
    <el-tabs>
    <el-tab-pane label="User" >
        <template #label>  <!--插槽绑定属性-->
            <div>
               <span><el-icon><UserFilled /></el-icon></span>  <!--添加图标内容-->
               <span>User</span> <!--内容-->
            </div>
        </template>User
    </el-tab-pane>
    <el-tab-pane label="Config" >
        <template #label>
            <div>
               <span><el-icon><Tools /></el-icon></span>
               <span>Config</span> 
            </div>
        </template>Config
    </el-tab-pane>
    </el-tabs>
   </div>
</template>
<script setup>
import { ref} from 'vue';
const name=ref('footer')
</script>

<style>
/* .app {
  background-color: skyblue;
  width:100vw; //占满
  height: 100vh;
} */
/* 居中 */
.app{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

 效果：