CODEWITHSUNDEEP
vue.js
Chris
Chris

Reputation: 6233

How to define property types when passing props to grandchildren in Vue.js?

I have a Vue component foo inside my HTML and I pass a parameter to it like this:

<foo some="Some String"></foo>

Now inside the foo component I define the property type and default value like so:

 export default {
    name: "foo",
    props: {
        some: {
            type: String,
            default() { return '' }
        }
    }
}

The foo component's template has another component bar which I pass the some property: <bar :some="some"></bar>.

Now my question is: do I need to again define the type and default value for the some property, this time inside the bar component? So basically copy the props code from the foo component and paste it into the bar component or is there another way?

Upvotes: 1

Views: 544

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.

Passing data with props

What you need here is to use scoped slot:

Scoped slots allows you to pass props down from Parent components to Child components without coupling them together.

Upvotes: 0

Roy J
Roy J

Reputation: 43899

foo has ensured the type and default value, so there is no need to validate them in bar. If the type were something that has special behavior (e.g., boolean), you would need to specify it, but there's nothing special about string.

Upvotes: 1

Related Questions