菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-陈旭辉-20230625 [打印本页]

作者: 陌殇 时间: 2023-6-26 18:12
标题: 前端-陈旭辉-20230625
一、学习内容

1、vue组件-插槽
1.1、什么是插槽

需求: 在使用子组件的时候给子组件动态的添加一些内容

但是默认情况下使用子组件时在子组件中编写的元素是不会被渲染的

如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽。

插槽就是：==在子组件中放一个"坑", 以后由父组件来"填"==

1.2、插槽的用法

插槽的使用过程其实是==抽取共性、预留不同==；

 我们会将==共同的元素、内容依然在组件内==进行封装；

 插槽内可以包含任何：模板代码，包括 HTML，其他组件。

 同时会将==不同的元素使用slot作为占位==，让外部决定到底显示什么样的元素；

1.3、插槽的分类
1.3.1、匿名插槽

没有名字的插槽

虽然写多个匿名插槽不会报错, 但是在企业开发中推荐只能有一个匿名插槽

默认情况下有多少个匿名插槽, 我们填充的数据就会被拷贝多少份

这导致了所有插槽中填充的内容都是一样的

那么如果我们想给不同的插槽中填充不同的内容怎么办呢?

这个时候就可以使用具名插槽

1.3.2、具名插槽

具名插槽顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的 attribute：name；

一个不带 name 的slot，会带有隐含的名字 default；

在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽

1.3.3、作用域插槽

作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据

使用

在slot中通过 v-bind:数据名称="数据名称" 方式暴露数据
在父组件中通过 <template slot-scope="作用域名称"> 接收数据
在父组件的 <template></template> 中通过 作用域名称.数据名称 或者数据结构方式使用数据

2、v-slot指令

v-slot指令是Vue2.6中用于替代slot属性的一个指令

在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽

从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽

注意点:

v-slot指令只能用在template标签上

可以使用#号替代v-slot:

3、生命周期函数

分为三大阶段：初始化显示、更新显示、销毁Vue实例

3.1、初始化阶段

beforeCreate() 实例创建前：数据和模板均未获取到

==created() 实例创建后: 最早可访问到 data 数据，但模板未获取到==

beforeMount() 数据挂载前：模板已获取到，但是数据未挂载到模板上。

==mounted() 数据挂载后：数据已挂载到模板中==

3.2、更新显示

beforeUpdate() 模板更新前：data 改变后，更新==数据模板前==调用

updated()模板更新后：将 data 渲染到数据模板中

3.3 、销毁阶段

beforeDestroy() 实例销毁前

destroyed() 实例销毁后

3.4、activated和deactivated

当配合vue的内置组件 <keep-alive> ⼀起使⽤的时候,才会调⽤下⾯此⽅法

<keep-alive> 组件的作⽤它可以缓存当前组件

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)