vue2升级vue3: TSX Vue 3 Composition API Refs

在vue2时代,$refs 直接操作子组件

this.$refs.gridlayout.$children[index];

虽然不推荐这么做,但是确实非常好用。但是vue2快速迁移到vue3,之前的这个写法因为干进度,不想重构,直接搬迁,发现不行?

看了下官方的文档:v-for 中的 Ref 数组 | Vue.js



    let itemRefs = ref()
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })

注意:

  • itemRefs 不必是数组:它也可以是一个对象,其 ref 可以通过迭代的 key 被设置

  • 如有需要,itemRefs 也可以是响应式的,且可以被侦听。

在tsx 这个怎么弄呢?

TSX refs

网上的大部分教程都是 template 的

Typing Template Refs

const el = ref(null)

普通元素

Typing Component Template Refs

import MyModal from './MyModal.vue'

const modal = ref | null>(null)

const openModal = () => {
  modal.value?.open()
}

对于子组件,其实和 let timer: ReturnType = null; 类似。

如果不进行类型声明,modal 方法无法调用。 需要是as  魔法了

还有一个需要特别注意,就是子组件内容是暴露出来的,如果是

你可能感兴趣的:(vue3,jsx,tsx,refs,Ref)