自定义子组件的Vue引用不起作用 codesandbox demo

如何解决自定义子组件的Vue引用不起作用 codesandbox demo

我已经搜寻了几个小时，阅读了无数 vue 文档和有关stackoverflow的相关文章，没有运气。

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

我正在尝试创建一个唯一且只能在父（App）组件内部访问的ref，我的理解是，我应该在setup方法内执行以下操作：{{1 }}

但是，{const myRef = ref(null)永远是myRef.value

??

codesandbox demo

条目文件：

null

父母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"上可以正常工作，但是我需要它在我的自定义组件上工作，这样我就可以在其中访问内容...

现在我不了解 vue 的杰克****，那里有一堆非常矛盾的令人困惑的信息。.我在演示中使用版本<h1> v3组件是用这种方式创作的（从我的疯狂中我几乎无法理解），但是我的组件App是用tagify.vue的方式创作的-供更广泛的受众使用。>

---

更新-浪费大量时间后

是 codesandbox控制台错误！错误地将其显示为v2 我非常信任他们的控制台，无法打开浏览器的控制台（由于性能原因，因为它极大地降低了该特定网站上的计算机的速度）。

解决方法

关于父组件 我认为主要的问题是，当前在Vue 2.x上，您不能在Vue组件的模板中放置2个直接子元素。 ***实际上可以，但前提是您将使用JSX渲染功能而不是<template></template>块。

第二，您不应在模板内使用x.value，而应仅使用x（在vue-loader内部处理）。因此，将:value="tagifyStuff.value"替换为:value="tagifyStuff"。

至于感冒成分 v模型无法在props.value上使用，因为来自的数据无法被突变。

在行动道具中传递功能（例如“ onClick”）不是“正确的方法”。 您的组件应使用$ emit（）方法调度事件，父组件应使用@my-event="doWhatever"

订阅此事件。

最好使用<style>标记中的CSS。 如果您坚持使用单独的文件，也可以编写<style src="@yaireo/tagify/dist/tagify.css"/>。

顺便说一句，如果您想使用父级的Tagify实例，为什么不只发出它呢？ 你可以这样写：

mounted() {
    this.tagify = new Tagify(this.$el,this.settings);
    this.$emit('ready',this.tagify);
}

然后像这样在父级中使用它：

<template><my-child @ready="tagifyIsReady"/></template>
<script>
export default {
  setup() {
    let tagify;
    return: {
      tagifyIsReady: (tagifyInstance) => tagify = tagifyInstance
    }
  }
}
</script>

,

我遇到了同样的问题并在 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>

Table.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>