In Vue.js, how can I select the node element of component? Is $refs possible?-CodePudding

Cause I want to select the node element of component, so I think maybe I can use $refs.

Parent

<template>
    <my-component ref="myComponentElement"></my-component>
</template>

<script>
  import MyComponent from "./MyComponent.vue";

  components:{
     MyComponent
  },
    mounted() {
    const theElement = this.$refs.myComponentElement;
    …
  },
</script>

Child

<template>
   <div>
     <div>test</div>
   </div>
</template>

I add "ref" to the component tag, and use "this.$refs.myComponentElement" to get the element. But it doesn’t get a node element, it return a proxy object instead.

So how can I select the node element of custom component? Can I use $refs? Thanks~

CodePudding user response：

For components, its root node is stored in $el:

export default {
  mounted() {
    const theElement = this.$refs.myComponentElement.$el