（视频笔记）07- ref引用和动态组件

目录

一、ref 引用

1、需求：控制文本框和按钮的按需切换(nextTick用法）

二、动态组件

1、内置的component组件

2、使用 keep-alive 保持状态

1、include属性

2、exclude属性

---

一、ref 引用

ref 用来辅助开发者在不依赖于jQuery 的情况下，获取DOM 元素或组件的引用。
每个vue 的组件实例上，都包含一个$refs 对象，（打印组件实例this就可以看见）里面存储着对应的DOM 元素或组件的引用。默认情况下，组件的$refs 指向一个空对象（没有写ref的时候）。

1、如果想要使用ref 引用页面上的DOM 元素，则可以按照如下的方式进行操作：

2、如果想要使用ref 引用页面上的组件实例，则可以按照如下的方式进行操作：

可以操纵子组件身上的data数据和methods方法

1、需求：控制文本框和按钮的按需切换(nextTick用法）

步骤1：通过布尔值inputVisible以及v-if和v-else来控制组件中的文本框与按钮的按需切换。

步骤2：当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生DOM 对象的.focus() 方法即可。

注意：组件的$nextTick(cb) 方法（cb是callback回调），会把cb 回调推迟到下一个DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行cb 回调函数。从而能保证cb 回调函数可以操作到最新的DOM 元素。

当某些代码的执行需要延迟，要延迟到最新的DOM渲染完毕以后才能执行，就要考虑nextTick

二、动态组件

动态组件指的是动态切换组件的显示与隐藏 

1、内置的component组件

vue提供了一个内置的 <component> 组件， 专门用来实现动态组件的渲染。component 可以看成一个占位符，告诉vue这里可以放组件

通过改变comName的值，动态的切换Left和Right组件

2、使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态 。如果此时用户对A组件做了一些操作（比如改变了data的值），切换到B组件再切回来时，发现A组件恢复到原始状态，很不方便。因为离开的时候组件被销毁了，再切回来的时候重新创建了一个新的实例。此时可以使用 vue 内置的 <keep-alive> 组件保持动态件的状态，将组件缓存，维持原状态，而不是销毁组件。示例代码如下：

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数
当组件被激活时，会自动触发组件的 activated 生命周期函数

当组件第一次被创建的时候，既会执行created生命周期，也会执行activated生命周期；但是，当组件被激活的时候，只会触发activated生命周期，不再触发created

1、include属性

 include属性用来指定： 只有名称匹配的组件会被缓存 。多个组件名之间使用英文的逗号分隔：

2、exclude属性

排除项，名称匹配的组件不会被缓存，注意：include和exclude不能同时使用