Vue3:ref 引用与动态组件

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