Components

A Component is a conceptual grouping for Vue components which are imported by Pages and other Components.

Unlike Pages, Components are never used in Routing. That would deviate from the Frontier Vue development style guide.

Technical

A Component contains all the files present for Pages with the addition of:

Components use special decorators from the Vue Facing Decorator library within their TypeScript file to add metadata useful for generating its documentation and facilitating class-based component development:

@Component: Decorates the Component’s class, providing metadata and functionality for the component.


name type: string, default: undefined	Sets the name of the component in Vue options API.
emits type: array, default: undefined	Specifies the events that the component can emit.
provide type: object, default: undefined	Provides values to be injected into child components.
components type: object, default: undefined	Registers other components to be used within this component.
directives type: object, default: undefined	Registers directives to be used within this component.
inheritAttrs type: boolean, default: true	Specifies whether to inherit attributes.
expose type: array, default: undefined	Specifies properties to be exposed.
render type: function, default: undefined	Provides a render function for the component.
template type: string, default: undefined	Provides an inline template for the component.
mixins type: array, default: undefined	Specifies mixins to be used in the component.
methods type: object, default: undefined	Specifies methods to be added to the component.
options type: object, default: undefined	Additional options to be assigned to the Vue options API before the modifier.
modifier type: function, default: undefined	Function to modify the generated Vue options API directly.

@Prop: Decorates the Component’s Props, providing metadata and functionality for the prop.


type type: Function, default: undefined	Specify the type of the prop. Supported types include String, Number, Boolean, Array, Object, Function, and Symbol.
default type: any, default: undefined	Set the default value for the prop.
required type: boolean, default: false	Specify whether the prop is required.
validator type: Function, default: undefined	Provide a custom validation function for the prop's value.

@Emit: Decorates methods to emit Vue events. It can be used to create event emitters easily.


event type: string, default: method name	Specify the name of the event to emit.
args type: array, default: method arguments	Define the arguments to pass when emitting the event.

@Watch: Watches changes on a Vue instance property. It can be used to react to changes on data properties.


prop type: string, required	The name of the prop to watch.
options type: object, default: {}	Options for the watcher, such as `deep` and `immediate`.

These decorators facilitate a class-based component development style, providing clear metadata and functionality for components, props, events, and watchers. By leveraging these decorators, you can maintain a clean and organized codebase while utilizing powerful TypeScript features.

For more information and detailed examples, you can refer to the Vue Facing Decorator documentation.

Examples

Basic Component Example

Below is a basic example defining a MyButton component with various properties filled out:

myButton.ts

import { Component, Vue, toNative } from 'vue-facing-decorator';
@Component({
    name: 'MyButton',
    emits: ['click'],
    components: {
        // other components can be registered here
    },
    directives: {
        // custom directives can be registered here
    }
})
class MyButton extends Vue {
    public handleClick() {
        this.$emit('click');
    }
}
export default toNative(MyButton);

MyButton.vue

<script src="./myButton.ts"></script>
<template>
    <button @click="handleClick"><slot></slot></button>
</template>

Adding a Prop

Now, let's add a prop to the Button component:

myButton.ts

import { Component, Vue, toNative, Prop } from 'vue-facing-decorator';
@Component({
    name: 'MyButton',
    emits: ['click']
})
class MyButton extends Vue {
    @Prop({ type: Boolean, default: false }) disabled!: boolean;
    public handleClick() {
        this.$emit('click');
    }
}
export default toNative(MyButton);

MyButton.vue

<script src="./myButton.ts"></script>
<template>
    <button :disabled="disabled" @click="handleClick"><slot></slot></button>
</template>

Adding a Watcher and Emit Event

Next, we'll add a watcher to respond to changes in a prop and emit an event:

myButton.ts

import { Component, Vue, toNative, Prop, Watch, Emit } from 'vue-facing-decorator';
@Component({
    name: 'MyButton',
    emits: ['click', 'stateChange']
})
class MyButton extends Vue {
    @Prop({ type: Boolean, default: false }) disabled!: boolean;
    @Watch('disabled', { immediate: true })
    onDisabledChange(newVal: boolean) {
        this.emitStateChange(newVal);
    }
    @Emit('stateChange')
    emitStateChange(newVal: boolean) {
        return newVal;
    }
    public handleClick() {
        this.$emit('click');
    }
}
export default toNative(MyButton);

MyButton.vue

<script src="./myButton.ts"></script>
<template>
    <button :disabled="disabled" @click="handleClick"><slot></slot></button>
</template>

These examples demonstrate how to define a component, add props, watchers, and emit events using the Vue Facing Decorator library. For more details, you can refer to the Vue Facing Decorator documentation.

Edit this page on GitHub

FeaturesPages

FeaturesServices