How to reload child components in vue.js | Code2night.com
Code2night
  • Home
  • Blogs
  • Guest Posts
  • Tutorial
  • Post Blog
  • Register
  • Login
  1. Home
  2. Blogpost

How to reload child components in vue.js

Date- May 15,2021

9921

Vue js Child Components

Vue js Child Components

So Vue js child components are basically a small piece of code that can be used to render some part of code at many places to make it more reusable. While using those as a beginner we need to reset the fields inside vue js child components. But following the props way of resetting data isn't as easy to implement as a newcomer so we will see how to reload vue js child component without props method.

Re-Render vue js child component-

So the best way to re-render  a child component is using :key attribute. We will see how to use this.

So first of all you have to add a :key attribute on your child component. Like we have showed in the image below


<template>
  <child-component-name :key="componentKey" ></child-component-name>
</template>

So, after adding this you have to declare this key variable in data method like we have shown in next image

So , the basic idea behind this is that vue js will re-render the child component every time you will change the value of the :key . It means if we change the value of componentKey then the child view will be reloaded . You can try changing the value like we have showed in the next image 

So, whenever we will increment the key value , the child component will be reloaded to its new state.You can do that on any button click or inside any method. So this is how we can reload child component in vue js.  

Comments

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Free Download for Youtube Subscribers!

First click on Subscribe Now and then subscribe the channel and come back here.
Then Click on "Verify and Download" button for download link

Subscribe Now | 1210
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading
Be a Member
Join Us On Whatsapp Join Us On Facebook

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2025 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier
  • Guest Posts