javascript - 自定义子组件上的 vue ref 不起作用

Question

我已经谷歌搜索了几个小时，阅读了无数的 vue 文档和 stackoverflow 上的相关帖子，但没有成功。

我需要访问组件的内部属性，因为该组件不过是我需要在父级中访问的普通组件的包装器。

我正在尝试创建一个唯一且只能在父 ( App ) 组件内部访问的 ref，我的理解是我应该在 setup 内部执行此操作像这样的方法:const myRef = ref(null)

但是，myRef.value永远null

🤯😭

codesandbox demo

入口文件:

import { createApp } from 'vue'
import App from "./App.vue";

createApp(App).mount('#app')

父App.vue :

<template>
    <Foo ref="myRef"/>
</template>

<script>
import { onMounted, ref } from 'vue'
import Foo from "./components/Foo.vue"

export default {
  name: "App",
  components: { Foo },

  setup(props) {
    const myRef = ref(null)

    onMounted(()=>{
      console.log(111,  myRef.value)
    })

    return {
      myRef
    }
  }
}
</script>

子组件Foo.vue :

<template>
  <div>xxx</div>
</template>

<script>
export default {
  name: "Foo",
  mounted() {
    this.test = 123
  }
}
</script>

如果我放置 ref="myRef"在 <h1> 上它可以工作，但我需要它在我的自定义组件 上工作，这样我才能访问那里的东西...

现在我对 vue 不了解 jack**，而且那里有大量非常矛盾的令人困惑的信息。我使用的是版本 v3在我的演示和 App组件是以这种方式编写的(从那里的疯狂中我能理解的一点点)但是我的组件 tagify.vue创作于 v2时尚 - 更广泛的受众使用。

---

更新 - 在浪费了大量时间之后

这是 codesandbox 控制台错误!它错误地显示为 null我非常信任他们的控制台，所以不会打开浏览器的控制台(由于性能原因，因为它会大大降低我在该特定网站上的计算机速度)。

Answer 1

我遇到了同样的问题并在 Vue Discord 服务器上解决了它。这就是你在 Vue 3 中使用组合 API 的方式:

App.vue:

<template>
  <v-header @get-started="scrollToTable" />
  <v-table ref="tableRef" />
</template>

<script setup>
import VTable from "./components/Table.vue";

import { ref } from "vue";

const tableRef = ref(null);

const scrollToTable = () => {
  tableRef.value.getRef()?.scrollIntoView({ behavior: "smooth" });
};
</script>

表格.vue:

<template>
  <table ref="root">
    <!-- some stuff here -->
  </table>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const root = ref(null);
    const getRef = () => root.value;

    return { root, getRef };
  },
};
</script>