CODEWITHSUNDEEP
vue.js
Narktor
Narktor

Reputation: 1037

Please help me understanding the use of props in Vue

I've been digging into vue.js for the last 3 days, working with a vue cli 3 testproject.

I've some experience in object oriented programming, but not much. Still, the "generic" approach of vue seemed familiar to me, echoing practices I've already seen in OOP.

Still, there are a lot of things boggling my mind and one of them are props.

I've sifted through several tutorials, both video and written form. Here is one pretty short I've read recently which illustrates the situation as I see it pretty short and nicely: https://reactgo.com/vuejs-props-tutorial/

So, to my understanding, props are ESTABLISHED in what I would deem a PARENT if we were in OOP. In the tutorial above, the author created button.vue where the props are declared and then exported to post.vue. This, in my opinion, makes button.vue the parent of post.vue because post.vue inherits from button.vue. However, in generic programming or at least in vue, its vice versa Oo ALL tutorials now (would) call post.vue the parent, because it specifies the data for the props for example through the html.

Post.vue

<template>
    <div>
        <h1>My first post</h1>
        <p>This a big post helps us to learn vue props</p>
        <my-button name="Share"></my-button>
        <my-button name="Like"></my-button>
        <my-button name="Comment"></my-button>
    </div>
</template>

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

    export default{
        components:{
            'my-button':Button
        }
    }
</script>

This really blows my mind when it comes to more complex components, where a view (using the terms a project using routing) consists of a component which was manufactured through a chain of multiple components building on each other. Something like this: MyView->listBuilder->listData1

I'm really struggling to understand how the technical side of vue works here. I might as well take it as a given, but I'm pretty sure it won't be long before I run into problems because components building on components building on components (and so on) try to resolve properties which simply are not there yet, because the sequence in which the components inherit from each other was all juggled up.

It probably isn't a very good idea to build long chains of components building on each other, but the need might arise to do so at some point and then I'd like to have a good understanding of the ways vue handles this.

Furthermore, I'd really like to know the upsides of this approach in vue/generic programming. It reminds me of interfaces in OOP, because I can specify in childcomponents what the parentcomponents MUST work with.

Upvotes: 1

Views: 113

Answers (1)

nativedigital
nativedigital

Reputation: 61

Like artoju already mentioned, don`t strictly apply OOP mindset.

In your example i dont see any data definition or prop definition.

Your View Component "post.vue" is the Root/Parent, inside there you are importing your Button component therefor it`s a child of "post.vue". Nothing to overthink.

Maybe this link can help you a bit more: https://forum.vuejs.org/t/how-can-i-make-oop-user-interfaces/10512/7

Upvotes: 1

Related Questions