Javascript '；这.$refs'；在父组件中始终为空

我正在尝试执行

ref

的标准实现，以便可以将子元素插入我的

InfoBox

。但是，无论我把什么作为“ref”元素放在哪里，我的InfoBox组件都不会用到它。日志调用的结果总是

{}未定义

单击处理程序用于测试计时问题，因为使用

created

vs

mounted

似乎是一个常见问题

<InfoBox
  v-if="waitingForCode">
  <p ref="infoboxcontent">A 7-digit verification code has been sent.</p>
</InfoBox>

已发送7位验证码

及

{{this.$refs.infoboxcontent}}
导出默认值{
名称：“信息盒”，
安装的（）{
log（this.$refs，this.$refs.infoboxcontent）
},
方法：{
点击（）{
log（this.$refs，this.$refs.infoboxcontent）
}
}
}
//某种风格

我开始认为我从根本上误解了'ref'属性的用法，因为这似乎是一个微不足道的例子。非常感谢您的帮助。

Vue特殊属性用于引用当前组件模板中的DOM节点（或子组件）

如果要将某些内容传递给自定义组件，这是Vue内置组件的用例。

Vue特殊属性用于引用当前组件模板中的DOM节点（或子组件）

---

如果要将某些内容传递给自定义组件，这是Vue内置组件的使用案例。

如果您认为在应该使用插槽的地方使用了ref，如果您认为在应该使用插槽的地方使用了ref，那么还需要注意ref注册时间：因为ref本身是通过渲染功能创建的，无法在初始渲染时访问它们。另外：关于ref注册计时的一个重要注意事项：由于ref本身是作为“渲染”功能的结果创建的，因此无法在初始渲染时访问它们。

<template>
  <div
    class="info-box"
    @click="clicked" >
    {{ this.$refs.infoboxcontent }}
  </div>
</template>

<script>
export default {
  name: 'InfoBox',
  mounted() {
    console.log(this.$refs, this.$refs.infoboxcontent)
  },
  methods: {
    clicked() {
      console.log(this.$refs, this.$refs.infoboxcontent)
    }
  }
}
</script>

<style scoped>
  // some style
</style>