在 v-dialog 中引用子组件

Question

我在 vuetify的组件v-dialog中获取组件的引用时遇到问题。

此代码在控制台而不是对象中打印undefined。

<template>
    <v-dialog ref="mydialog">
        <v-card ref="mycard">
        </v-card>
    </v-dialog>
</template>

<script>
export default {
  mounted() {
      console.log(this.$refs.mycard);
  }
}
</script>

无法通过v-dialog 中的引用访问子组件？

Answer 1

由于 vuetify 2 中的延迟加载，您无法访问 v-card 组件。

如果您确定需要在挂载阶段访问 v-card 组件，则可以在 v-dialog 组件中添加eager prop。

此代码有效：

<template>
  <v-dialog ref="mydialog" eager>
    <v-card ref="mycard">
    </v-card>
  </v-dialog>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.mycard);
    }
  }
</script>