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

Question

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

\n

家长

\n

<template>\n    <my-component ref="myComponentElement"></my-component>\n</template>\n\n<script>\n  import MyComponent from "./MyComponent.vue";\n\n  components:{\n     MyComponent\n  },\n    mounted() {\n    const theElement = this.$refs.myComponentElement;\n    \xe2\x80\xa6\n  },\n</script>\n

\n

孩子

\n

<template>\n   <div>\n     <div>test</div>\n   </div>\n</template>\n

\n

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

\n

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

\n

Answer 1

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

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

演示