Vue.js Basics Part 7 | Props

Today, I will be talking about props in Vue.js.

This is part 7 of my Vue.js Basics series, to read part 6, please click here

As I mentioned in my previous post, we can reuse Vue components. But, why would we want to reuse the same thing? Because we can send data dynamically and loop over the data to make it look like as it's something else. However, today I will talk only about how to send props from parent to child component.

Here is the code from parent component:

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

    export default {
    components: {
        ChildComp
    },
    data() {
        return {
        greeting: 'Hello from parent'
        }
    }
    }
    </script>

    <template>
    <ChildComp :msg="greeting"/>
    </template>

First, we import the component like so:import ChildComp from './ChildComp.vue', remember syntax import <something> from <path>. Afterwards, register imported component in components option.

components: {
    ChildComp
  },

Then, we've got data which only has the value of greeting: 'Hello from parent', notice it's a string. We will have to register this prop with its data type in child component. If you've got questions about data types, please read this

Lastly, in our parent component we've got <ChildComp :msg="greeting"/>. :msg="greeting" this is the 'prop'. Remember? : stands for v-bind:. So, we bind the prop, and in this case we pass in greeting from our 'data'.

Here's our child component:

    <script>
    export default {
    props: {
        msg: String
    }
    }
    </script>

    <template>
    <h2>{{ msg || 'No props passed yet' }}</h2>
    </template>

As you can see from the code above, we've got a new property called props. That's where props are registered. Recall, we used :msg='' in our parent component, that :msg prop comes from here. Its data type is string because we made it string here (msg: String).

Finally, on the bottom we've got <h2>{{ msg || 'No props passed yet' }}</h2> this line of code. This part is actually JavaScript. In short, || this or operator displays whatever satisfies the condition. In this case, it displays whatever is truthy. Before we pass props from parent component to child component, msg will be falsy. So, code will display 'No props passed yet' (because this is truthy). However, when props passed from Parent component, it will display greeting in data from parent (because there will be a string in this case, and it's truth), and that is 'Hello from parent'.

To sum it up, today we talked about how to pass props from parent to child component. To do that, we register props (props: {}) in child component; give props names and data types (props: { msg: String }). Finally, give them values in parent component (greeting: 'Hello from parent'), and pass them as props from parent to child component (<ChildComp :msg="greeting"/>).

---

That's it for part 7. Next, I will be going through emits in Vue.