$el и $refs

$elОба $refsатрибута используются для доступа к элементам DOM в компонентах Vue.js, но существуют некоторые различия в их использовании и назначении.

1. $el:

   • $elЭто свойство экземпляра компонента Vue.js, используемое для доступа к фактическому элементу DOM, соответствующему компоненту.
   • При использовании внутри компонента this.$elу вас есть прямой доступ к корневому элементу DOM компонента.
   • Однако в большинстве случаев использование this.$elне является рекомендуемым подходом, основанным на данных, для Vue.js, поскольку он напрямую манипулирует DOM и может привести к несовместимости с реактивным механизмом Vue.js.

2. $refs:

   • $refsЭто свойство экземпляра компонента Vue.js, используемое для доступа к refдочерним элементам или компонентам с атрибутами внутри компонента.
   • В шаблоне вы refидентифицируете элемент, добавляя к нему атрибут, и $refsполучаете к нему доступ в экземпляре компонента с помощью .
   • $refsОбеспечивает лучший способ взаимодействия с дочерними компонентами или конкретными элементами без прямого манипулирования DOM.

Пример:

<template>
  <div>
    <button ref="myButton" @click="changeColor">Change Color</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      // 使用 this.$refs 来访问具有 ref="myButton" 的元素
      this.$refs.myButton.style.backgroundColor = 'blue';
    }
  }
};
</script>

Подведем итог:

• $elИспользуется для доступа к корневому элементу DOM компонента, но непосредственное манипулирование DOM может не способствовать отзывчивому механизму Vue.js.
• $refsИспользуется для доступа к refдочерним элементам или компонентам с атрибутами, обеспечивая лучший способ взаимодействия с дочерними элементами или компонентами без прямого манипулирования DOM.