Section 1.1: The Need for Delegated Control

Imagine we have a parent component designed to collect a quote, while the child component displays the percentage of the form that has been filled out. When a user completes a field, the child should update this percentage. However, passing it as a prop requires the parent to perform the percentage calculation, which is neither scalable nor reusable for the child.

Instead, one might consider creating a function in the child to recalculate the percentage, then notifying the parent to invoke it. Yet, this approach lacks efficiency and reusability.

The solution here is to utilize Delegated Control by Reference. Just as we can create references for variables, we can also establish them for components.

Section 1.2: Implementing Delegated Control

Let’s consider our parent component with a quote form.

// ParentComponent.vue

import ChildComponent from './ChildComponent.vue'

import { ref } from 'vue'

const getQuote = () => {

// backend process

}

The child component is responsible for calculating the completion percentage.

// ChildComponent.vue

import { onMounted, ref } from 'vue'

const percentage = ref(0)

onMounted(() => {

percentage.value = 10

})

const recalculate = () => {

...

percentage.value = 42

}

To achieve Delegated Control by Reference, we first import the child component in the parent and create a reference to it. This allows access to the child’s methods, enabling us to update the completion percentage.

// ParentComponent.vue

import ChildComponent from './ChildComponent.vue'

import { ref } from 'vue'

const percentageComponent = ref(null); // reference to the child

const getQuote = () => {

// backend process

percentageComponent.value.recalculate(); // access and call the recalculate method

}

In the child component, we need to expose the methods that should be accessible from the parent using defineExpose.

// ChildComponent.vue

import { onMounted, ref, defineExpose } from 'vue'

const percentage = ref(0)

onMounted(() => {

percentage.value = 10

})

const recalculate = () => {

...

percentage.value = 42

}

defineExpose({ recalculate }); // expose the method

With these steps, we have successfully delegated the child’s methods to the parent, leveraging a valuable Vue feature.

Section 1.3: Using Options API

For those working with the Options API, the same principle applies. In this approach, methods are public by default, so we don’t need to expose them explicitly.

// ParentComponent.vue

import ChildComponent from './ChildComponent.vue'

import { defineComponent } from 'vue'

export default defineComponent({

components: {

ChildComponent

},

methods: {

getQuote() {

this.$refs.percentageComponent.recalculate();

}

}

});

// ChildComponent.vue

import { defineComponent } from 'vue'

export default defineComponent({

data() {

return {

percentage: 0

}

},

methods: {

recalculate() {

...

this.percentage = 42;

}

},

mounted() {

this.percentage = 10;

}

});