在 vue3 中是不是可以访问子组件槽中的根 DOM 元素？我正在尝试在 vue3 中使用第 3 方库（sortablejs）

Posted 2023-02-22

【中文标题】在 vue3 中是不是可以访问子组件槽中的根 DOM 元素？我正在尝试在 vue3 中使用第 3 方库（sortablejs）

【英文标题】：Is it possible in vue3 to access the root DOM element in a child component slot? I am trying to use a 3rd party library (sortablejs) in vue3在 vue3 中是否可以访问子组件槽中的根 DOM 元素？我正在尝试在 vue3 中使用第 3 方库（sortablejs）

【发布时间】：2021-11-02 20:04:14

【问题描述】：

在 vue2 中我可以使用 this.$el

export default  
render() 
return this.$slots.default[0]
,
mounted() 
Sortable.create(this.$el, );
)

如果在 vue3 中我尝试使用 this.$slots.default()[0] 我看不到如何定位元素。 如果我使用模板引用，我可以获得 div，但不能获得包含的插槽。

我找到的最接近的问题/答案在这里Vue 3 Composition API - How to get the component element ($el) on which component is mounted

但这似乎也给出了 div，而不是插槽 $el。

这在 vue2 中非常强大，因为 sortable 可以在插槽中传递一个 ul 或一个 div 或另一个构造的可排序 vue 组件，并且无需在子组件中定义元素即可工作，我无法工作了解如何在 vue3 中复制它。

我最初是在 Adam Wathan 的屏幕截图中看到的：“使用 Vue.js 构建可排序组件”，但这是 vue2。

【参考方案1】：

我想出了以下（也许有更好的）

使用模板参考：

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

然后在脚本中：

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.children[0]) // this is your $el
        let el = root.value.children[0]
        Sortable.create(el, )
      )

      return 
        root