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.
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
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.
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
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.
We also need to reference the imported component in the component property of our main component.
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.
The name property can now be accessed on the user component as seen above.