Vue 3 Composition API - Как получить элемент компонента ($ el), на котором установлен компонент - PullRequest
Новая
       53

Vue 3 Composition API - Как получить элемент компонента ($ el), на котором установлен компонент

3 голосов
/ 04 мая 2020

Я хочу использовать onMounted для запуска сторонней библиотеки. Для этого мне нужен компонентный элемент в качестве контекста. В Vue 2 я бы получил это с помощью this.$el, но не уверен, как это сделать с функциями композиции. setup имеет два аргумента, и ни один из них не содержит элемента. 

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

1 Ответ

3 голосов
/ 04 мая 2020

tl; dr:

В Vue 3 компоненты больше не ограничены только 1 root элементом. Неявно это означает, что у вас больше нет $el. Вы должны использовать ref для взаимодействия с любым элементом в вашем шаблоне.

Как указано @AndrewSee в комментариях, при использовании функции рендеринга (не шаблона) вы можете указать желаемый ref в createElement варианты: 

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

начальный ответ:

Как указано в docs ,

[...] концепции реактивного ссылки и ссылки шаблона объединены в Vue 3.

И у вас также есть пример того, как ref элемент «root». Очевидно, вам не нужно называть его 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 вы больше не ограничены только одним элементом root. в <template>, поэтому вам нужно ref указать любой элемент, с которым вы хотите взаимодействовать.

...