vue3获取组件根节点方法

在Vue 3中，获取组件的根节点是一个常见的需求，尤其是在需要对DOM元素进行操作时。Vue 3 提供了多种方式来获取组件的根节点，介绍几种常见且有效的方法。

解决方案

Vue 3提供了ref和template refs等机制来获取组件根节点。通过使用这些特性，开发者可以在组合式API（Composition API）或选项式API（Options API）中轻松地获取到组件的根DOM元素，并对其进行操作。

方法一：使用 ref 和 template refs

这是最直接的方式，适用于组合式API和选项式API。我们可以通过在模板中的元素上添加ref属性，然后在脚本部分定义对应的ref变量来获取该元素。

vue

  <div>
    <!-- 组件内容 -->
  </div>
</p>


import { ref, onMounted } from 'vue'

// 定义一个ref来引用根元素
const rootElement = ref(null)

onMounted(() => {
  // 当组件挂载后，可以访问rootElement.value获得DOM元素
  console.log(rootElement.value)
})


<p>

对于选项式API，则是这样：

vue

  <div>
    <!-- 组件内容 -->
  </div>
</p>


export default {
  mounted() {
    // 在mounted生命周期钩子中可以访问this.$refs.rootElement得到DOM元素
    console.log(this.$refs.rootElement)
  }
}


<p>

方法二：使用 expose 暴露组件实例

当父组件想要获取子组件的根节点时，可以利用expose选项或者defineExpose宏（在<script setup>中）。这允许我们将组件内部的状态或方法暴露给外部使用。

以<script setup>为例：

vue
<!-- ChildComponent.vue --></p>


import { defineExpose } from 'vue'
// 假设我们在子组件里也有个ref指向根元素
const rootEl = ref(null)

defineExpose({
  getRootNode: () => rootEl.value
})


<p>
  <div>我是子组件</div>

然后在父组件中：

vue

  
</p>


import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childComp = ref(null)

onMounted(() => {
  if (childComp.value) {
    const rootNode = childComp.value.getRootNode()
    console.log(rootNode)
  }
})


<p>

以上就是在Vue 3中获取组件根节点的一些常用方法。不同的场景可以选择不同的方式实现，合理运用它们可以帮助我们更好地操作DOM，构建出更加强大灵活的应用程序。