Vue.js Basics Part 7 | Props
Tags: javascript, webdev, programming, vue
Published: 2022-09-07 02:51:42

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](https://dev.to/ahmetmeliksah/vuejs-basics-part-6-components-4864)_

As I mentioned in my [previous post](https://dev.to/ahmetmeliksah/vuejs-basics-part-6-components-4864), 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: 
```javascript
    <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. 
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)_

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:
```javascript
    <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.