Vue 2 Slots in mDIS

This section provides a detailed overview of how Vue 2 slots are used in mDIS, including practical examples and code snippets for customizing forms with slots. Slots allow you to inject static content, such as instructions or additional components, into forms and other Vue components. This guide covers:

• The difference between named, default, and scoped slots
• How slots are defined and used in DisForm.vue and DisSmartForm.vue
• Examples of customizing forms using slots
• Passing components and event handlers via slots
• Practical code samples and explanations

At a Glance

Slots can be used to inject static content, e.g., text blocks such as "How-To" descriptions, into forms with complicated data entry requirements, or to add further instructions for mDIS operators.

This tutorial is only very basic and scratches the surface of what is possible with Vue slots.

In mDIS, v-slots are used in at least 25 .vue files, not only in DisForm.vue. <slot> elements are used in at least 7 .vue files.

Fallback Content for Slots

If a parent component does not provide any content for a slot, the default (fallback) content defined between the child component's <slot> tags will be rendered. For example:

<button type="submit">
    <slot>Submit</slot>
</button>

If you use <submit-button></submit-button>, the button will display "Submit". If you use <submit-button>Save</submit-button>, it will display "Save".

Compilation Scope

Slot content is always compiled in the parent component's scope, not the child. This means you can only access variables and methods from the parent inside slot content, not from the child component.

Slot Usage in DisForm.vue

The <template> elements of the DisForm and DisSmartForm components each contain two named <slot> elements: form-fields and extra-form-actions. These are Vue scoped named slots that can be used for form specialization. Scoped slots have access to data only available in the child component. Named slots are more flexible than default slots, of which there may exist only one per <template> block.

Slot form-fields

The content of this slot will be rendered where the form fields reside. This slot provides access to:

• formScenario: The current form scenario (create, edit, or view)
• selectedItem: The currently selected item
• formModel: The object holding the current record loaded on the form
• serverValidationErrors: Validation errors returned from the server

Slot extra-form-actions

The content of this slot will be rendered at the bottom of the form. By default, child/parent forms are rendered here. This slot provides access to:

• selectedItem: The currently selected item
• onSubFormClick: Event handler for child forms
• onSupFormClick: Event handler for parent forms

Example: Customizing SampleForm.vue

You can add any component (icon, image, link, button, etc.) in the two available slots. For example, you can embed a clickable picture using the extra-form-actions slot:

<!-- SampleForm.vue -->
<template>
    <v-container fluid>
        <v-flex align-start>
            <h2>Sample</h2>
            <dis-form formName="sample" dataModel="SaSample" :fields="simpleFields" :requiredFilters="requiredFilters" :filterDataModels="filterDataModels" :calculatedFields="calculatedFields">
                <template v-slot:form-fields="{fields, hasNumberValidator, getInputComponent, formScenario, selectedItem, formModel, serverValidationErrors}">
                    ...existing code...
                </template>
            </dis-form>
        </v-flex>
    </v-container>
</template>

You can also register a click handler in the <script> section:

methods: {
  onGoToCoresClick () {
    this.$router.push('/forms/cores-form')
  }
}

Result

The "GO TO CORES" string in the picture is a clickable link.

For more details, see the official Vue slot documentation.