Component with same name in Vuejs


Suppose we have a vue component from a different module and carry the name of the component in current module, in short a duplicate name. In such case Vue allow us to rename the component (from other module) in register component section.

It can be possible by using name/alias before the component name separated by a colon

import DoughnutChart from '@/components/Doughnut'
export default {
  name: "Doughnut",
  components: { 'DC' :DoughnutChart 
  },


Here DC is the name given to the component DoughnutChart which is imported from Doughnut module.

In the template we can still use the functionality of the component as

<template>
  <div class="flex-container">
    <DC :chartData="chartdata" :options="options" />
  </div>
</template>

The following Vuejs-component Posts may help you

TS class component in Vuejs


TypeScript is a modern typed language which is a superset of vanilla JavaScript. For easy development TS is a great tool . Let’s learn how to build a Vue component using TS.

JS and TS

One of the important difference between a JS component and TS component is that how the , data, computed and methods are organized.

Data

The data ( ) is replaced in TS class by regular variables, arrays etc.

Methods

As we know methods hold functions and event handlers, in TS class it is just functions.

Computed

Remember computed ? the reactive functions which automatically computed ? In TS class component it becomes get and set methods.

Here is a sample TS class component

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

<script>
const nameProp= Vue.extend({
  props: {
    name: {
      type: String,
    },
  },
});
export default class NewComponent extends nameProp {
  //data
  version : 1.0
  //method
  method1(){
  conole.log('some text')  
  }  
};
</script>

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

The following vue posts may help you

How to add props in Vuejs component using TypeScript


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

Props in TS class

TypeScript allow us to separate Props from class, by extending and create a Prop object. I recommend this method.

  • Create props object by extending Vue class
  • Use the object to create our component class
<template>
  <div>{{ this.name }}</div>
</template>

<script>
const nameProp= Vue.extend({
  props: {
    name: {
      type: String,
    },
  },
});
export default class NewComponent extends nameProp {
  //data
  version : 1.0
  //method
  method1(){
  conole.log('some text')  
  }  
};
</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 posts may help you

How to add interface as props in Vuejs


This is another TypeScript post for Vuejs users. We had seen how to add props in TS, if you miss those, use the following links

[display posts include_excerpt=true id=5278,5285]

Interface

Interface is like structure for Object. We can declare custom types in our project as Interfaces which can be organized in a file and folder (best practice).

Here is our sample Interface, this will hold value for Task

//types/index.ts
export interface Task{
    id: number,
    title: string,
    isdone: boolean
}

Defining props as custom type

Using props as Object Vue let us use Interface as Type. We can’t do it directly, instead Vue provide PropType. Let me show

import Vue, { PropType } from "vue";
import { Task } from "@/Types";

const editProp = Vue.extend({
  props: {
    task: {
      type: Object as PropType<Task>,
    },
  },
});
export default class EditDialog extends editProp {
...
}

Using the PropType we specify the Interface/Type and that should work.

The following vue posts may help you

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