1、ref引用
1.1 什么是 ref 引用
- ref 用来辅助开发者在不依赖于jQuery 的情况下，获取 DOM 元素或组件的引用。
- 每个 vue 的组件实例上，都包含一个
$refs对象，里面存储着对应的DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。 - ref引用
1.2 使用 ref 引用 DOM 元素
- 如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：
- ref引用dom元素
1.3 使用 ref 引用组件实例
-
如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：
- ref引用组件
1.4 控制文本框和按钮的按需切换
-
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下：
- 文本框定义
- 切换
1.4.1 让文本框自动获得焦点
-
当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。示例代码如下：
- 文本框自动获得焦点
- 会出现this.$refs.ipt undefined，原因是 dom元素是异步更新，此时元素还没更新完成
1.4.2 this.$nextTick(cb) 方法
-
组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 异步地重新渲染完成后，再执行 cb 回调函数。从而能保证cb 回调函数可以操作到最新的 DOM 元素。
- $nextTick(cb)
2、动态组件
2.1 什么是动态组件
-
动态组件指的是动态切换组件的显示与隐藏。vue 提供了一个内置的 <component> 组件，专门用来实现组件的动态渲染。
① <component> 是组件的占位符
② 通过 is 属性动态指定要渲染的组件名称
③ <component is="要渲染的组件的名称"></component>
2.2 如何实现动态组件渲染
- 动态组件渲染
2.3 使用 keep-alive 保持状态
-
默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue 内置的 <keep-alive> 组件保持动态组件的状态。示例代码如下：
- keep-alive
