美文网首页
Vue3:ref 引用与动态组件

Vue3:ref 引用与动态组件

作者: 顾北向南 | 来源:发表于2023-01-13 14:52 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Vue3:ref 引用与动态组件

          本文链接:https://www.haomeiwen.com/subject/nypgcdtx.html