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
网友评论