- [Instructor] Next, we'll talk about passing data
to child components using props.
So we might try changing this href
in our read-more component, back to a dynamic attribute
and then we could change the value here to readMoreurl.
referencing our data property.
But if we refresh the page now
and look in our dev tools in the console
if we have warnings enabled, we'll probably see one
that says the readMoreurl. was accessed, but not defined.
Like I mentioned before, the read more component
can't just reach up into the parent instances data.
What we want to do instead is have the parent
pass this data down to the child component
through the use of what's called a prop.
So down in the component options
I can add props to declare the data that this
component is expecting to be provided with.
So this can take several forms and one is just an array
of string names and we'll include URL
as one of the props that this component is expecting.
And then instead of referring to readMoreurl. here
I can just use its own prop URL.
And then up in our main template
on the read-more tag we'll pass URL
just like any other dynamic property colon URL
and the value is readMoreurl..
It's important to stop and note
that we don't always have to use a colon here
and make our props dynamic.
And that's true for any attribute
of any element in the template.
For example, I could just pass a hard coded URL here
and then remove the colon.
But with the colon, we're signaling
that readMoreurl. is the name
of a data property and not a string value.
So, notice that this is no longer underline
and I can't click it
there's no href there, but if I refresh
I have my link working again.
And if we can do that
then it should be relatively simple to create a component
out of the card itself.
So this entire div here.
So again, I'm going to cut this markup to the clipboard
and use it to create a new component
that I'm going to call flash-card.
So next, after we register read-more
we can register our new component flash-card.
So we give it the tag and then the options.
And we declare the template inside single quotes.
I'm going to paste what I had on the clipboard.
And remember, now that this is a string
that's spread out among multiple lines.
I do have to escape the new lines with a backslash.
And let's also give it a name like the other one.
We'll call it flash-card.
Now let's think about what props
this component needs to accept.
Look at the data properties that are referenced here.
We have flipped isRepeat, front and back.
So again we'll add props
and then an array with those names.
Flipped isRepeat, front and back.
Let's go back up to the flash-card tag and set it up.
So it's passing those properties down to the card component
because we set up those computer properties
we can just pass flipped for flipped
isRepeat for isRepeat and so on.
One thing we need to be careful of though
is that HTML attributes are not case sensitive.
So instead of camel casing isRepeat
we'll want to use a kebab case
meaning a hyphen between is, and repeat.
We could go ahead and change that
in the props array in the component options as well
if we wanted to, but that's optional.
So now if we go back to the browser and refresh
look at the view dev tools, I have a flash-card component
and a read more component as child components of the route.
And what's more, I can see all the props
for this component on the right here.
Notice that isRepeat is undefined because that's not
in our data file, but just something we add
on the fly to flash-card.
A child component also can't access the methods
of it's parent component.
So got-it and again are not going to work yet
but before we even get that far, we have to deal
with another problem, which is that we're not
allowed to just reassign the value of flipped
when we click since flipped is data that's owned
by the parent and only shared with this flash-card component
you'll see a message in the console about that
if you do click.
Saying that props are read only.
So in the next video
we'll talk about how to handle that issue correctly.