vue2升级vue3: TSX Vue 3 Composition API Refs

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

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

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

看了下官方的文档：https://v3.cn.vuejs.org/guide/migration/array-refs.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5

    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  魔法了

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