Vue 3 Composition API - 如何获取安装组件的组件元素（$el）

Question

我想用 onMounted 来启动第三方库。为此，我需要组件元素作为其上下文。在 Vue 2 中，我会使用 this.$el 但不确定如何使用组合函数来实现。 setup 有两个参数，它们都不包含元素。

 setup(props, context) {
    onMounted(() => {
        interact($el)
            .resizable();
    })
}

原文由 Damir Miladinov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

tl;博士：

在 Vue 3 中，组件不再仅限于 1 个根元素。隐含地，这意味着您不再拥有 $el 。

您必须使用 ref 与模板中的任何元素进行交互：

 <div ref="root" />

在 setup 函数中，您应该将 root 实例化为 const root = ref(null) 。

在 Options API 中，只要在 — 之后，您就可以在任何方法或挂钩中使用 this.$refs.root mounted() 。

正如@AndrewSee 在评论中指出的那样，当使用渲染函数（不是模板）时，您可以在 createElement 选项中指定所需的 ref --- ：

 render: function (createElement) {
  return createElement('div', { ref: 'root' })
}
// or, in short form:
render: h => h('div', { ref: 'root' })

---

初步答案：

如 文档 中所述，

[…] 反应式引用 和 模板引用 的概念在 Vue 3 中是统一的。

您还有一个示例，说明如何 ref “根”元素。显然，您不需要将其命名为 root。如果您愿意，请将其命名为 $el 。但是，这样做并不意味着它将作为 this.$el 提供，而是作为 this.$refs.$el 。

 <template>
  <div ref="root"></div>
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // this is your $el
      })

      return {
        root
      }
    }
  }
</script>

在 Vue 3 中，您不再仅限于 <template> 中的一个根元素，因此您必须明确 ref 您想要与之交互的任何元素。

---

2年后更新。

各种组件样式的特定语法（它们不是不同的解决方案，它们是编写同一事物的不同方式）：

<script setup> ：

 <script setup>
import { ref, onMounted } from 'vue';
const root = ref(null);
onMounted(() => console.log(root.value.outerHTML));
</script>
<template>
  <div ref="root" />
</template>

<script setup lang="ts"> ：

 <script setup lang="ts">
import { ref, onMounted } from 'vue';
const root = ref<HTMLElement | null>(null);
onMounted(() => { console.log(root.value?.outerHTML) );
</script>
<template>
  <div ref="root" />
</template>

选项 API ：

 <script>
  export default {
    mounted() {
      console.log(this.$refs.root.outerHTML);
    }
  }
</script>
<template>
  <div ref="root" />
</template>

原文由 tao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 Vue 3 + Composition API 中没有提供 $el 替代方案。

即使您使用带有 Options API 的 Vue 3，由于 Fragments 的可用性，建议使用模板 refs 直接访问 DOM 节点，而不是依赖 this.$el 。

---

如何启动第三方库

假设我们有一个用于第三方库的 div 元素：

 <template>
  Below we have a third-party-lib
  <div class="third-party-lib"></div>
</template>

然后我们想从 Javascript 启动它：

解决方案 1（推荐）：使用模板引用

<script setup>
import { ref, onMounted } from 'vue';

const $thirdPartyLib = ref(null); // template ref

onMounted(() => {
  $thirdPartyLib.value.innerText = 'Dynamically loaded';
});
</script>

<template>
  Below we have a third-party-lib
  <div ref="$thirdPartyLib" class="third-party-lib"></div>
</template>

解决方案 2（不推荐）：使用未记录的 @VnodeMounted

 <script setup>
function initLib({ el }) {
  el.innerText = 'Dynamic content';
}
</script>

<template>
  Below we have a third-party-lib
  <div class="third-party-lib" @VnodeMounted="initLib"></div>
</template>

实时查看两种解决方案

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议