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

Posted 2023-02-21

【中文标题】在 Vue.js 中，如何选择组件的节点元素？ $refs 可能吗？

【英文标题】：In Vue.js, how can I select the node element of component? Is $refs possible?

【发布时间】：2022-01-19 12:52:52

【问题描述】：

因为我想选择组件的节点元素，所以我想也许我可以使用$refs。

父母

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

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

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

孩子

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

我将“ref”添加到组件标签中，并使用“this.$refs.myComponentElement”来获取元素。但它没有获取节点元素，而是返回一个代理对象。

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

【参考方案1】：

对于组件，其根节点存储在$el：

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

demo