Referencje w szablonach ​

Chociaż deklaratywny model renderowania Vue abstrahuje większość operacji na DOM, mogą zdarzyć się przypadki, w których potrzebujemy bezpośredniego dostępu do elementów DOM. Aby to osiągnąć, możemy użyć specjalnego atrybutu ref:

<input ref="input">

ref to specjalny atrybut, podobny do atrybutu key omawianego w rozdziale v-for. Pozwala nam uzyskać bezpośrednie referencję do konkretnego elementu DOM lub instancji komponentu dziecka po jej zamontowaniu. Może to być przydatne, gdy chcemy na przykład programowo ustawić fokus na inpucie podczas montowania komponentu lub zainicjować bibliotekę zewnętrzną na elemencie.

Dostęp do referencji ​

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

// pierwszy argument musi odpowiadać atrybutowi ref w szablonie
const input = useTemplateRef('my-input')

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="my-input" />
</template>

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

// zadeklaruj ref do przechowywania referencji do elementu
// nazwa musi pasować do wartości atrybutu ref w szablonie
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}

<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>

Należy pamiętać, że dostęp do referencji jest możliwy dopiero po zamontowaniu komponentu. Jeśli spróbujesz uzyskać dostęp do $refs.inputinput w wyrażeniu szablonu, będzie to undefinednull przy pierwszym renderowaniu. Dzieje się tak, ponieważ element nie istnieje aż do pierwszego renderowania!

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // nie jest jeszcze zamontowany, lub element został odmontowany (np. przez v-if)
  }
})

Referencje wewnątrz v-for ​

Wymaga wersji v3.5 lub wyższej

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

const list = ref([
  /* ... */
])

const itemRefs = useTemplateRef('items')

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

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

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        /* ... */
      ]
    }
  },
  mounted() {
    console.log(this.$refs.items)
  }
}
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

Należy zauważyć, że tablica referencji nie gwarantuje tej samej kolejności, co tablica źródłowa.

Referencje funkcyjne ​

Zamiast nazwy klucza, atrybut ref może być również powiązany z funkcją, która będzie wywoływana przy każdej aktualizacji komponentu i daje pełną elastyczność w przechowywaniu referencji do elementu. Funkcja ta otrzymuje referencję do elementu jako pierwszy argument:

<input :ref="(el) => { /* przypisz el do właściwości lub referencji */ }">

Zauważ, że używamy dynamicznego powiązania :ref, aby przekazać funkcję zamiast ciągu znaków jako nazwę referencji. Gdy element zostanie odmontowany, argument będzie null. Oczywiście można użyć metody zamiast funkcji inline.

Referencje na komponencie ​

Ta sekcja zakłada znajomość komponentów. Jeśli chcesz, możesz ją pominąć i wrócić później.

ref może być również używane na komponencie dziecka. W takim przypadku referencja będzie dotyczyła instancji komponentu:

<script setup>
import { useTemplateRef, onMounted } from 'vue'
import Child from './Child.vue'

const childRef = useTemplateRef('child')

onMounted(() => {
  // childRef.value will hold an instance of <Child />
})
</script>

<template>
  <Child ref="child" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value będzie przechowywać instancję <Child />
})
</script>

<template>
  <Child ref="child" />
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    // this.$refs.child będzie przechowywać instancję <Child />
  }
}
</script>

<template>
  <Child ref="child" />
</template>

Jeśli komponent dziecka używa Options API lub nie korzysta ze <script setup>,Wtedy referowana instancja będzie identyczna z this komponentu dziecka, co oznacza, że komponent nadrzędny będzie miał pełny dostęp do wszystkich właściwości i metod komponentu dziecka. Ułatwia to tworzenie ściśle powiązanych szczegółów implementacyjnych między rodzicem a dzieckiem, więc referencje do komponentów należy stosować tylko wtedy, gdy jest to absolutnie konieczne – w większości przypadków należy spróbować zaimplementować interakcje rodzic-dziecko przy użyciu standardowych interfejsów props i emit.

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

// Makra kompilatora, takie jak defineExpose, nie muszą być importowane
defineExpose({
  a,
  b
})
</script>

export default {
  expose: ['publicData', 'publicMethod'],
  data() {
    return {
      publicData: 'foo',
      privateData: 'bar'
    }
  },
  methods: {
    publicMethod() {
      /* ... */
    },
    privateMethod() {
      /* ... */
    }
  }
}