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

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.