Original subtitles

In this lecture, we're going to learn how to use props in the composition API props haven't changed

that much in the composition API.

The composition API doesn't replace everything.

There are still some options we can define in the component.

Here's what we'll do.

We'll create a component that will output an alert message.

If the name of the user changes, we created a timeout function that will change the name of the user.

It would be nice if we can get alerted of when the change occurs from the parent component in the components

directory.

Create a file called Alert View.

Will scaffold the template and script blocks.

In the template, block will add an empty div tag to prevent you from throwing an error during compilation.

Great, we can import the component into the app component back in the app component file.

Import the alert component.

We can register the component by using the components option, we'll add it to the component with the

alert component passed in.

The composition API doesn't completely replace the options API, there are still some options we can

use for things like registering the component.

The composition API provides functions for creating data methods, computed properties, watchers and

lifecycle functions.

Everything else is still performed with the options.

API will load the component in the template, will place it below the other elements.

The alert message, the component will output will be based on if the user's name changes, we'll need

to provide it with the user object will bindu property onto the component called user.

Its value will be the user object.

This finding will throw an error because the setup function is not returning the user variable.

It won't be accessible in the template, will update the return statement to include the user variable.

Time to work on the alert component now that we have everything we need from the parent component back

in the alert component file.

We're going to accept the user object by adding the prompts option to the component.

The props option is another option that isn't available in the composition API.

We still need to use the options API if we want to accept properties.

The next thing we'll do is use the user prop to create a computer property.

It'll check if the user has changed since will be creating a computed property, will import the computed

function from the View package.

Next, we'll add the setup function to the component.

Afterward, we'll define a variable called flag, its value will be the computed function with an arrow

function Pastan.

Inside the function will want to use the prop, however, here's the problem the setup function runs

before the components, props, data, methods and computed properties are registered.

It runs before any of the lifecycle functions.

We don't have access to anything.

The this keyword won't work in the setup function.

This is a problem because we want to be able to use the props passed down from the parent component.

Luckily, the setup has an optional parameter called props.

We'll add the props parameter to the function.

This parameter will give us access to the props passed down from parent components.

In addition, the second parameter to the setup function is called context.

This parameter will give us access to the other properties and methods in the component, you can think

of it as the equivalent to the this keyword.

We won't be using it for this example, so we won't add it to the function in the callback function

for the computed property will return.

The following prompts.

That user name equals, equals, equals John.

This value is the default value for the main property in the object, if this turns out to be false,

will want to output a message.

We'll handle this in a moment.

Before we do, we'll need to return the flag variable for it to be exposed to the template.

The last thing we'll need to do is add the message on the div tag, we'll add the V if directive.

The condition will check if the flag variable is false.

If it is, we'll display the contents of the elements inside the element, we'll add some text to let

the user know the name has changed.

To make it more noticeable, we'll change the color of the text to red by using the style attribute.

Let's try running things in the browser, refresh the page.

After three seconds, the name will change because we have the time function running, the message will

appear because the parent component sends the updated value to the alert component.

This will cause the function in the computer property to run the main take away from this lecture as

how we're using props in the child component.

It's slightly different because we don't have access to props through the this keyword.

We have to use the prompts parameter in these set of function to be able to use props.

It's a different approach that you'll need to be aware of.