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

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.