Intro

Vue is a simple, minimal and yet scalable JavaScript framework that can be used to build powerful web applications.

With the basic understanding of HTML, CSS and JS one should hit the ground running. Vue is a better alternative to AngularJS and React because of its lightweight nature.

In this article, we will see how to pass data from the parent component to the child component.

Vue CLI

We'll need the Vue CLI. The CLI helps in scaffolding Single Page Applications and in no time you will have an app running with some cool features like hot-reload, lint-on-save, and production-ready builds.

We install the Vue CLI by running  npm install --global vue-cli

Vue Template

There are 5 available templates shipped with Vue CLI: out-of-the-box ready to use package. This entails focusing on writing your code instead of worrying about your app scaling decisions.

  • webpack - A full-featured Webpack + Vue-loader setup with hot reload, linting, testing & CSS extraction.
  • webpack-simple - A simple Webpack + Vue-loader setup for quick prototyping.
  • browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  • browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  • simple - The simplest possible Vue setup in a single HTML file

Setting up Vue App

We are going to run vue init webpack user-app to set up our app. This is the essence of the Vue CLI - to get our apps up and running.

You will be asked to enter a project name, description, author, and Vue build. You can use your enter key to select the default details suggested to you by Vue.

 

setting up vue
setting up vue

 

At this point, we need to install the required dependencies by navigating into our project, in this case which is app-user and run npm install, after the dependencies installation, next is to run npm run dev.

This would automatically open up your browser and point you to http://localhost:8080 .

Creating a Component

The Vue CLI creates a default component Hello during set up that can be found in src/components/Hello. We will create our own component called User.vue

Importing Components

To use the component we just created, we need to import it into our main component. Inside of src/App.vue make the following changes just above the script.

importing component
importing component

We also need to reference the imported component in the component property of our main component.

 

V-bind
Passing data from parent component to the child component in VueJS

 

We will need to pass data from the main component to the User component. For this, we will use the v-bind directive. The directive takes an argument which is indicated by a colon after the directive name. Our argument will be name, which tells the v-bind directive to bind the element’s name attribute to the value of the expression name.

The name will now be available in the User component as name. We will have to modify our User component to access this data. The User component has to declare the properties it will accept when using it. We do this by adding a property to the component class.

using the props

Conclusion

 The name property can now be accessed on the user component as seen above. 

Category
A Web Developer. Defender of WomenInTech. I love knowledge, I like learning, but knows next to nothing about Politics and Lies. Passionate about using technology to disrupt the way businesses are done.