Vue第6天学习笔记01（动态组件，组件缓存，插槽）

目录

动态组件：

1.1组件缓存：--涉及钩子函数

1.2_组件激活和非激活（面试）

1.3_组件插槽（重要）--难点---复习

1.4_组件进阶 - 插槽默认内容

1.5_组件进阶 – 具名插槽​

1.6作用域插槽（重点--难点）

自定义指令（另外一篇文章）：

---

错误:属性不能加逗号！！！！

错误笔记：表示路径有两出错误！！！

解决：根据提示的代码去找出问题即可。

表示相关的第三方包未下载就使用：

解决：下载第三方包即可。---但是还存在经常报错，我在重新打开终端运行就没有了？什么情况？

----------------------------------------------------------------------------------------------

动态组件：

我们为什么需要使用动态组件？动态组件有什么用？

应用场景：

当我们在一个组件（同个挂载点）进行多个组件的切换的时候，我们就能使用动态组件--也可以使用if-else-if但是这种太过繁琐。

需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息

效果如下:

作用：

使用动态组件能提高性能。会涉及到component（内置组件）。

具体的步骤：

1.引入组件--数据记录需要切换的组件名：---使用内置组件<component>,----绑定按钮事件。

注意：①最重要的是第三步“准备变量显示组件名--也就是在数据data里面设置的变量名来面的属性值是注册的组件名”

②component是内置的不需要注册，可以直接使用！

 存在的问题？is属性表示什么？是默认显示的组件

1.1组件缓存：--涉及钩子函数

频繁的操作组件的切换，会每次的创建和销毁，这样性能不高，如何避免呢？

可以添加Vue内置的keep-alive组件 包起来要频繁切换的组件

注：如果没有keep-alive的情况就木有激活的钩子函数。

1.2_组件激活和非激活（面试）

目标：扩展2个新的生命周期方法

---------------------------------------------------------------------------------------------------------------------------------

1.3_组件插槽（重要）--难点

目标：通过 slot 标签, 让组件内可以接收不同的标签结构显示

⚫ 给组件插入什么标签, 组件就显示什么标签

 步骤：（重要）

1.在封装的组件的时候不确定的位置使用插槽占位--slot占位！

2.在使用该组件的时候是传入想在插槽展示的内容！！！

3.在使用的时候组件的时候可以多次使用传入同一个slot里面。

1.4_组件进阶 - 插槽默认内容

1.5_组件进阶 – 具名插槽

步骤：（重要）

1.在封装组件的不确定位置采取slot使用name属性来区分名字--（子组件）

2.在使用的组件采取模板（template）和v-slot的名字来对应相应的标签！--（父组件）

3.v-slot：可以简化为#

1.6作用域插槽（重点--难点）

错误展示：！！！！

 问题：使用组件内的变量？？？使用哪个组件（本身的组件还是父组件的？）--父组件想使用子组件的，并且是在插槽中使用！

看做子插槽---父插槽

步骤：1.先在子插槽里面自定义属性--然后在父插槽v-solt="变量名"---最后在父插槽使用即可（变量名.子插槽的自定义属性）

扩展：老版的插槽的使用？

自定义指令：

---------------------------------------------------------------------------------------------------------------------

案例：（忽略。。。）

底部

1.

2.

组件切换：

1.创建组件---编写组件

2.引入组件--注册--

3.使用内置组件（）--：is=“”

4.设置头部底部样式

5.底下点就切换---子传父（重点）

数据请求：

父元素请求数据--子元素渲染页面

简写：

通过isshow来控制按钮的显示和隐藏是不能定义一个。

tab功能：

点击就会光标定位，2.不输入回车则提醒，3.输入内容可敲回车。4.按esc淸空数据。