Menu
Just learning Vue and TypeScript with class based components, my single file component looks like this:
<template>
...
<div>
<contact-component v-bind:key="c.id" v-for="c in contacts">
</contact-component>
</div>
</template>
<script lang="ts">
import ContactComponent from "./Contact.vue";
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class ContactsComponent extends Vue {
data() {...}
components = { ContactComponent }
}
</script>
It generates the following error:
Unknown custom element: - did you register the component correctly?
Obviously my registration of the component does not work, but I have no idea how to fix this in TypeScript. What's the correct way to register ContactComponent so that it can be used in the above template?
280
When we want to globally register a component in Vue, we need to do it in this file. All you have to do is import your component, as you usually would, and then register it using app. component . import { createApp } from 'vue' import App from './App.
Components with inline templates strings are also another way to declare Vue components. We can declare these components with the Vue. component method by passing in the name of the component as a string as the first argument, and the component object itself, including the template, in the 2nd argument.
vue-property-decorator allows you to define your properties directly on your class with a simple @Prop() decorator. This approach allows your classes to stay clean and flat compared to the traditional approach of defining a props object with each prop defined on it.
STEP 01: First, Import the Child Component into the Parent Component inside script tag but above export default function declaration. STEP 02: Then, Register the Child Component inside the Parent Component by adding it to components object. STEP 03: Finally, Use the Child Component in the Parent Component Template.
Read that first if you are new to components. A Vue component needs to be "registered" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local. We can make components available globally in the current Vue application using the app.component () method:
Some of the most important parts of Vue are missing in Vue Class Component, for example, ECMAScript decorators like props, inject, model, ref, emit, and provide. As a result, the Vue community introduced a library called Vue Property Decorator, which fully depends on the Vue Class Component and is now fully endorsed by the Vue core team.
We can make components available globally in the current Vue application using the app.component () method: import { createApp } from 'vue' const app = createApp({}) app.component( // the registered name 'MyComponent', // the implementation { /* ... */ } ) If using SFCs, you will be registering the imported .vue files:
import ComponentA from './ComponentA.vue' export default { components: { ComponentA } // ... } You could do it simply as before by adding that component to components option : import ComponentA from './ComponentA.vue' export default defineComponent ( { setup () { const count = ref (0) return { count } }, components: { ComponentA } });
like this
@Component({
components: { ContactComponent }
})
export default class ContactsComponent extends Vue {}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
