'this.$refs' 在父组件中始终为空

Question

我正在尝试执行 ref 的标准实现，以便我可以将子元素插入到我的 InfoBox 中。但是无论我似乎作为 'ref' 元素放置什么，都永远不会进入我的 InfoBox 组件。结果始终是来自日志调用的 {} undefined。

点击处理程序用于测试计时问题，因为使用 created 与 mounted 似乎是一个常见问题。

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

和

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

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

Answer 1

ref Vue 特殊属性用于从您的当前组件模板.[=14 中引用 DOM 节点（或子组件） =]

如果您想将一些内容传递给自定义组件，这是 <slot> Vue 内置组件的用例。

'this.$refs' 在父组件中始终为空

'this.$refs' is always empty in parent component

javascript

ref

vue.js

vuejs2