Home » vue » 'this.$refs' is always empty in parent component

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

Posted by: admin November 26, 2021 Leave a comment


I’m trying to do a standard implementation of ref so that I can insert children elements into my InfoBox. But whatever I seem to put as a ‘ref’ element, never makes it to my InfoBox component. The result is always {} undefined from the log calls.

The click handler is to test timing issues, as using created vs mounted seemed to be a common issue.

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


    @click="clicked" >
    {{ this.$refs.infoboxcontent }}

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

<style scoped>
  // some style

I’m starting to think I fundamentally misunderstand the usage of the ‘ref’ attribute since this seems like a trivial example. Any help would be greatly appreciated.


The ref Vue special attribute is used to refer a DOM node (or a child component) from your current component template.

If you want to pass some content to a custom component, this is the use case for a <slot> Vue built-in component.