在 VUE3 中不使用 ref 從父調用子方法

Question

我正在嘗試從父級調用子方法。

我使用的庫實際上不支持 VUE 3。
它有 VUE3 Beta 版本，這意味着它不會完美支持 VUE 3。

代碼是這樣的：

<grid-layout
          
          ref='gridlayout'
          v-model:layout="layout"
          :col-num="6"
          :row-height="70"
          :is-draggable="draggable"
          :preventCollision='true'
          :verticalCompact="false"
          :isResizable="false"
          :use-css-transforms="true"
          :maxRows='5'
     >

          <!-- can not use ref here -->
          <grid-item
            :key="item.key" v-for="item in layout"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i='item.i'
          >
            <span class="text">{{item.i}}</span>
          </grid-item>
        </grid-layout>

它不支持對網格項的引用，但我需要在其中聲明的 function。

我試過：

__vueParentComponent.proxy

但它在生產模式下不起作用。
是我更改源代碼並在 GitHub 上打開請求的唯一方法嗎？！
相關問題很難搜索。 希望可以有人幫幫我...

編輯：
抱歉，問題不完整。
這是我使用的圖書館。
https://jbaysolutions.github.io/vue-grid-layout/

我想動態地將一個新的網格項目抓取到網格布局中。
圖書館提供了從外部抓取的方式，但我面臨一個問題，即 VUE 3 中刪除了“$children”。

https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/Example10DragFromOutside.vue

有錯誤的代碼庫提供：

// get the grid-item
let el = this.$refs.gridlayout.$children[index];

// call grid-item function to calculate the new position
let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);

我將其編輯為：

var gridlayout = ref()
let el = gridlayout.value.$refs.item.children[index]
let new_pos = el.__vueParentComponent.proxy.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)

它在生產模式下不起作用。
我收到錯誤：

TypeError: Cannot read properties of undefined (reading 'proxy')

有沒有辦法在沒有 ref 的情況下替換“$children”？

Answer 1

我剛才也遇到了這個問題，我的解決方法是直接獲取子組件

<grid-item
          ref="gridItemRef"
          v-for="item in layoutData"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
          @resized="resizeEvent"
        >
          {{ item.i }}
        </grid-item>

gridItemRef.value[layoutData.value.length].$el.style.display = "none";
const el = gridItemRef.value[index];
el.calcXY(
      mouseXY.y - parentRect.top,
      mouseXY.x - parentRect.left
    );