当前位置：首页 > news >正文

Vue3中插槽, pinia的安装和使用(超详细教程)

news 来源：原创 2025/6/14 21:32:51

1. 插槽

插槽是指, 将一个组件的代码片段, 引入到另一个组件。

1.1 匿名插槽

通过简单的案例来学习匿名插槽，案例说明，在父组件App.vue中导入了子组件Son1.vue，父组件引用子组件的位置添加了一个片段，比如h2标签，然后在子组件选择某个位置通过slot标签引入父组件中定义的代码片段。实操如下图所示：

运行

可以看到正常情况下，应该是先执行“我是父组件的片段”，但是因为进行了插槽，并且<slot>标签在子组件下, 所以子组件在上。如若<slot>标签在上, 那么我是父组件的片段就在上方

1.2 具名插槽

之前写的插槽都是没有任何id或name等标识符, 这就会导致我们在一个子组件中, 只能引用一个父组件的片段, 不能使用多次, 或者说从多个父组件引用片段, 所以就需要有插槽名来进行区分

具名插槽需要配合template标签并使用v-slot:插槽名来定义，具体案例实操如下图所示：

运行

具名插槽的简写

我们使用具名插槽的时候格式是这样的: <template v-slot:插槽名> 片段</template>

v-slot:插槽名我们可以写成===> :插槽名

部分代码

<Son><template :mySlot1><p>这是父组件的片段1</p></template><template v-slot:mySlot2><p>这是父组件的片段2</p></template></Son>

1.3 作用域插槽

前两个讲的都是把父组件的片段引入到子组件,并没有说明到传值, 作用域插槽可以在slot标签通过属性的方式把值传给父组件。

2. pinia

由于Vue3是组合式开发，有大量的组件，组件与组件之间虽然可以通过父子传值等操作但是会造成大量的状态散落在组件之间，维护起来非常不方面，Pinia可以很好的解决这些问题。

Pinia是一个轻量级的状态管理库。

所谓的状态管理库就是用于管理应用程序全局状态的工具。那么什么又是全局状态呢？

以登录为例：

当用户登录成功时，登录成功的这个状态需要保持并维护，那么可以使用pinia来创建一个集中管理用户登录状态的角色，并为其设置过期时间。

2.1 安装和使用

在vscode的终端运行: npm install pinia

在main.js文件中对pinia进行三步操作导入,创建,注册.

通过上述操作，我们的项目就可以使用pinia了。

上面介绍的时候说了pinia是一个库，那么具体帮我们管理组件之间数据和状态的家伙是谁呢，一般管它叫store，接下来我们就来具体应用它。

在项目的src目录下新建一个stores的目录，然后再stores目录下新建一个js文件当做我们存储数据的仓库，课程案例中取名用的是web.js,然后在web.js文件中定义store数据并导出，返回。实操如图所示：

2.2 创建store步骤

1. 导入pinia的defineStore方法

2. 创建defineStore的对象并暴露

3. 在方法中传递参数('文件名',()=>{参数名})

import { reactive,ref } from "vue"
import { defineStore } from "pinia"export const useWebStore = defineStore('web',()=>{const web = reactive({title:"Pinia test",url:"bing.com"})const users = ref(100)const addUser = ()=>{users.value++}return {web,users,addUser}
})

最后我们到组件上面去使用定义好的store仓库中的数据以及函数，实操如下图所示：

2.3 运行结果

代码:

<template><!-- <router-view></router-view> -->
webStore获取到的值: {{ web.state }}
</template><script setup>
import {webStore} from './store/web.js'
const web = webStore()</script>