How to add props (JS) in Vuejs component

Props / properties area meant to display initial values on component and also meant to parent – child communication. So how to add a props to a new (JavaScript) Vuejs component ?

TypeScript have different solution for this, that is why I specify JS in title.

Props

Here is an ideal component with one props, name. We can use the props section of the component to define use the name,default,required and other options, it is also possible to define multiple props.

<template>
  <div>{{ this.name }}</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: { name: { type: String, default: "JS" } },
  methods: {},
};
</script>

<style lang="scss" scoped></style>

Import

Lets import and use the component, place it in your template and specify the props value.

import New from "@/components/New.vue";

<template>
 <New name='Vue'/>
</template>
@Component({
  components: {    
    New
  },
})
...

The following vue post posts may help you

• How reactivity works in Vuejs - How to use reactive feature in Vuejs
• Create a desktop version of Quasar-Vue app using Electron - How to build desktop version of Quasar Vue app using Electron
• Create PolarArea chart component in Vue - How to Create a PolarArea Chart component in Vue using vue-chartjs module
• Create Radar component in Vue - How to Create a Radar Chart component in Vue using vue-chartjs module
• Create Horizontal Bar chart component in Vue - How to Create a HoruzotalBar Chart component in Vue using vue-chartjs module
• Create Scatter chart component in Vue - How to Create a scatter Chart component in Vue using vue-chartjs module
• Create Bubble chart component in Vue - How to Create a bubble Chart component in Vue using vue-chartjs module
• Quasar UI framework for Vue - About Quasar Vuejs UI framework and How to create and run Vuejs app with Quasar CLI tool
• Component with same name in Vuejs - How to dealing with component has same name in Vuejs
• Create Pie chart component in Vue - How to Create a Pie Chart component in Vue using vue-chartjs module