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

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