Original subtitles

In this lecture, we're going to learn how to use template refs with the composition API sample at RAF's,

as we've learned, are a way to interact with the elements in a component.

They expose the native Browsr API for interacting with elements.

It's a feature available in case any other solution is not viable.

Working with template references is a slightly different process than before.

Let's look at how it's done in the template.

Let's add a button at the bottom of the template.

We're going to add an event listener to this button, however, for this demonstration, we're not going

to use views, binding syntax for listening events on elements.

We'll use template references.

The syntax for using template references in the template hasn't changed.

We can add the ref attribute to the button element.

The name for the reference will be button.

The next step is to add an event listener, however, there is a problem in our setup function, we

don't have access to the this keyword.

It's because these setup function is called before the component is instantiated.

Template references are accessible via the dollar sign ref's variable.

If we want to access template references, we need to create a variable that will store the reference.

This might be confusing, but just follow along.

I'll explain what's going on in a moment.

At the top of the setup, function will create a variable called button.

Its value will be the ref function with a value of null.

The ref function isn't limited to storying primitive values, it's able to store template references

to if we plan on using a reactive reference to store a template reference, its initial value must be

null.

Nicks, in the return statement, we can add this reference to the list of values to return.

When the set up function is called view will create the reactive reference, it won't be bound to anything

until the component has been mounted during the mounting phase.

You will notice we have an element with the eref attribute.

The value for the ref attribute must correspond to the name of the reactive reference we have in our

setup function.

We will assign the element to the reference, will be able to interact with the element in our setup

function after the component has been mounted.

We can proceed to add an event listener.

In our setup function, it's important we add the event listener after the component has been mounted,

if we were to attempt to add the event, listener will receive an error because the button variable

will be null.

Luckily, we talked about lifecycle functions already.

We already have the on mounted life cycle function in our function.

We can update the callback function by calling the ADD event listener function on the button value property.

Keep in mind, we're still using a reactive reference if we want to access the value, which in this

case is the element, we'll need to access it via the value property.

That's where a view will store the element.

The name of the event we'll listen to will be the click event.

Next in the callback function will log a message to let us know if the button was clicked.

Let's test the button in the browser.

If I press the button, the message gets logged from the event listeners callback function great, we've

learned how to use template references with the composition API.

It might seem a little confusing because there are two types of references we're working with.

To add clarity, let's talk about the differences in the template, we add the ref attribute to create

a template reference, a template reference is an object that allows us to interact with the HTML element

and the document in our setup function.

When we called the ref function, we are creating a reactive reference.

A reactive reference is an object that's being observed for changes.

We mainly use reactive references for storing primitive values, but it can be used to store a template

reference that doesn't for now.

I'll see you in the next one.