Javascript 无法从ref（Vue3）访问离子组件方法

我正在尝试访问IonList组件的closeSlidingItems方法，以便在将该项目向右滑动后，单击从后面显示的按钮时，滑动项目将自动关闭

我试图通过放置对IonList的引用，然后从这个按钮上单击事件的回调方法访问它。但是，我得到一个错误：

无法读取未定义的属性“closeSlidingItems”

这是根组件中的代码：

<template>
  <ion-app>
    <ion-list ref="myIonList">
      <ion-item-sliding v-for="user in users" :key="user">
        <ion-item-options side="start">
          <ion-item-option v-on:click="favorite(user)" color="primary">
            <ion-icon slot="icon-only" :icon="heartOutline"></ion-icon>
          </ion-item-option>
        </ion-item-options>

        <ion-item :color="userState(user)">
          <ion-label slot="start">{{ user.name }}</ion-label>
          <ion-label slot="end">{{ user.age }}</ion-label>
        </ion-item>
      </ion-item-sliding>
    </ion-list>
  </ion-app>
</template>

<script>
import {
  IonApp,
  IonContent,
  IonList,
  IonLabel,
  IonItem,
  IonItemSliding,
  IonItemOptions,
  IonItemOption,
  IonIcon,
} from "@ionic/vue";
import { defineComponent } from "vue";
import { heartOutline } from "ionicons/icons";

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    IonList,
    IonLabel,
    IonItem,
    IonItemSliding,
    IonItemOptions,
    IonItemOption,
    IonIcon,
  },
  data() {
    return {
      heartOutline,
      users: [
        {
          name: "John",
          age: 35,
          favorite: false,
        },
        {
          name: "Jane",
          age: 30,
          favorite: false,
        },
      ],
    };
  },
  methods: {
    favorite(user) {
      const favorite = user.favorite || false;
      user.favorite = !favorite;
      //console.log(this.$refs.myIonList);
      // This won't work despite I defined a reference to IonList and closeSlidingItems is a method of this component!
      this.$refs.myIonList.closeSlidingItems();
    },
    userState(user) {
      return user.favorite ? "success" : "";
    },
  },
});
</script>

{{user.name}
{{user.age}
进口{
艾奥纳普，
爱雍容，
IonList，
IonLabel，
项目,，
他说,，
项目选项，
IonItemOption，
爱奥尼肯，
}来自“@IONAL/vue”；
从“vue”导入{defineComponent}；
从“ionicons/icons”导入{heartOutline}；
导出默认定义组件({
名称：“应用程序”，
组成部分：{
艾奥纳普，
IonList，
IonLabel，
项目,，
他说,，
项目选项，
IonItemOption，
爱奥尼肯，
},
数据（）{
返回{
心脏轮廓，
用户：[
{
姓名：“约翰”，
年龄:35岁，
最喜欢的：假，
},
{
姓名：“简”，
年龄:30,，
最喜欢的：假，
},
],
};
},
方法：{
收藏夹（用户）{
const favorite=user.favorite | | false；
user.favorite=！favorite；
//console.log（this.$refs.myIonList）；
//尽管我定义了一个对IonList的引用，但这是行不通的，closeSlidingItems是这个组件的一个方法！
这是.$refs.myIonList.closeSlidingItems（）；
},
用户状态（用户）{
返回user.favorite？“成功”：“”；
},
},
});

您也可以自己尝试（尝试向右滑动一个列表项并单击心脏图标）：

---

有人能帮我找到问题，以及如何解决问题，或者解决问题吗？

离子项目滑动法也一样。参见下面的简化示例。当您尝试使用Vue3获取组件实例时，组件方法似乎不可见。在这种情况下，Ref返回一个代理对象

---

离子项目滑动方法与此相同。参见下面的简化示例。当您尝试使用Vue3获取组件实例时，组件方法似乎不可见。在这种情况下，Ref返回一个代理对象

---

好的，我想我明白了。尝试在ref之后添加

$el

---

这个。$refs.myIonList.$el.closeSlidingItems（）

好的，我想我明白了。尝试在ref之后添加

$el

---

this.$refs.myIonList.$el.closeSlidingItems（）

太棒了！它起作用了！非常感谢。我在文件里没看到。据说是用这个。$refs..method（）你在哪里找到的？太好了！它起作用了！非常感谢。我在文件里没看到。声明使用此方法。$refs..method（）您在哪里发现的？