在Vue.js中，如何select组件的节点元素？ $refs 可能吗？

Question

因为我想 select 组件的节点元素，所以我想也许我可以使用 $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>

我在组件标签中添加“ref”，并使用“this.$refs.myComponentElement”获取元素。但是它没有得到一个节点元素，它 return 一个代理 object 代替。

那么如何select自定义组件的节点元素呢？我可以使用 $refs 吗？谢谢~

Answer 1

对于组件，它的根节点存储在$el:

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

demo