Vue3关于插槽、生命周期、和Pinia-CSDN博客

本文链接：https://blog.csdn.net/m0_74096456/article/details/148093567

一、插槽

当我们想把父组件中的某些片段插入到子组件的指定位置时就可以使用插槽来实现。插槽分为匿名插槽和具名插槽。匿名插槽一般应用于简单的通用情况，具名插槽一般用于稍复杂场景。

1.1匿名插槽

使用步骤：

1.在父组件App.vue中导入了子组件Son1.vue。

2.组件引用子组件的位置添加了一个片段，比如h2标签。

3.在子组件想要应用的位置引用slot标签。

注意：其他地方引用了son1片段也会显示插槽的内容

1.2具名插槽

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

注意：具名插槽实现了在使用了多个插槽的时候，插槽冲突的问题，可以在子组件使用插槽的时候，指定需要插槽片段。与匿名插槽不同的是，具名插槽多了一个必须在父组件引用标签使用v-slot来指定一个属性值，在子组件slot标签，用name属性指定使用哪个插槽。

1.3、作用域插槽

前面匿名和具名插槽都是对代码片段进行渲染，并没有涉及到传值，作用域插槽可以在slot标签通过属性的方式把值传给父组件。（也就是说通过插槽的方式也可以实现子组件向父组件传值），接下来我们通过案例来看实际的操作。

二、生命周期

生命周期这里指的是组件涉及的生命周期函数。组件实例从创建到销毁过程中不同时间点自动调用的函数被称为生命周期函数。

生命周期图示 :

这里我们只介绍两个生命周期函数onMounted和onUpdate，实操看图所示：

注意：onMounted和onupdate在使用的时候，是通过调用的方式而不是定义的方式。具体方式是通过函数名（参数）的形式调用。

三、Pinia

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

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

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

以登录为例：

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

3.1、安装和使用

安装命令：npm install pinia

进入到项目的目录，执行安装命令等安装完成即可。可以在package.json文件中查看dependces下安装的pinia版本信息。

接下来就是使用方式：

使用Pinia只需要简单的3步即可，分别是导入，创建实例，注册到app中，具体实操如下图所示：

找到项目中的main.js文件。

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

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

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

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仓库中的数据以及函数，实操如下图所示：