Атрибуты :ref и :key компонента <el-button>

:refАтрибуты:

refЭто специальный атрибут, предоставляемый Vue.js и используемый для добавления ссылки на элемент или подкомпонент в компоненте Vue. С помощью refвы можете получить доступ к этим элементам или подкомпонентам в экземпляре Vue$refs для выполнения операций. Например:

<template>
  <div>
    <el-button ref="myButton">Click me</el-button>
  </div>
</template>

<script>
import { ElButton } from 'element-ui';

export default {
  components: {
    ElButton,
  },
  mounted() {
    // 现在你可以通过 this.$refs.myButton 访问 el-button 的实例或 DOM 元素
    const buttonInstance = this.$refs.myButton;
    console.log(buttonInstance);
  },
};
</script>

:keyАтрибуты:

keyЭто свойство, используемое Vue.js для оптимизации рендеринга компонентов. В виртуальном DOM Vue каждый узел должен keyотслеживаться , чтобы при обновлении компонента он мог более точно определить, какие узлы необходимо повторно отрисовать. keyСвойства часто v-forполезны при циклическом рендеринге с использованием директивы. Например:

<template>
  <div>
    <el-button v-for="button in buttons" :key="button.id">{
   
   { button.label }}</el-button>
  </div>
</template>

<script>
import { ElButton } from 'element-ui';

export default {
  components: {
    ElButton,
  },
  data() {
    return {
      buttons: [
        { id: 1, label: 'Button 1' },
        { id: 2, label: 'Button 2' },
        // ...
      ],
    };
  },
};
</script>

В приведенном выше примере keyсвойства гарантируют, что Vue правильно отслеживает изменения каждой кнопки при обновлении списка кнопок, что обеспечивает эффективный рендеринг.

Короче говоря, refон используется для доступа к ссылкам на элементы или подкомпоненты в компонентах Vue и keyиспользуется для оптимизации процесса рендеринга и обновления компонентов.

Атрибуты :ref и :key компонента <el-button>

Guess you like