Vue 3 Composable for Deep Component Method Calls
vue-deep-methods
allows calling methods on deeply nested components without prop drilling or event chaining. It provides a clean and scalable solution for Vue 3 applications.
npm install vue-deep-methods
yarn add vue-deep-methods
Each component must register itself with a unique id
and provide the methods that can be called later.
<script setup lang="ts">
import { useDeepComponent } from "vue-deep-methods";
import { onUnmounted } from "vue";
const { registerComponent, unregisterComponent } = useDeepComponent();
const componentId = "component-unique-id";
// Register component
registerComponent({
id: componentId,
methods: {
myFunction: () => console.log("My function"),
myOtherFunction,
},
});
const myOtherFunction = (params: any) => {
console.log("Another function", params);
};
// Unregister when component unmounts
onUnmounted(() => {
unregisterComponent(componentId);
});
</script>
Use callComponentMethod()
to call any method from a registered component.
import { useDeepComponent } from "vue-deep-methods";
const { callComponentMethod } = useDeepComponent();
callComponentMethod({
id: "component-unique-id", // the id we registered earlier
method: "myOtherFunction",
args: ["some-params"],
});
Use getComponent()
to check the available methods for a registered component.
const component = getComponent("component-unique-id");
console.log(component); // Logs available methods
Registers a component with a unique id
and its methods.
Parameter | Type | Description |
---|---|---|
id |
string |
Unique component ID |
methods |
Record<string, Function> |
Object of methods exposed by the component |
overwrite |
boolean (optional) |
If true , overwrites an existing component |
registerComponent({
id: "other-unique-id",
methods: {
rerender: () => console.log("Chart updated"),
},
overwrite: true,
});
Removes a registered component.
unregisterComponent("other-unique-id");
Calls a registered method on a component.
callComponentMethod({
id: "other-unique-id",
method: "rerender",
});
Retrieves the methods object of a registered component.
const component = getComponent("other-unique-id");
console.log(component);
const component = getComponent("component-unique-id");
if (component) {
component.myFunction();
component.myOtherFunction("some-data");
}
registerComponent({
id: "component-unique-id");,
methods: {
myFunction: () => console.log("Hello!"),
},
overwrite: true,
});
- Use unique
id
values for each component. - Always unregister components inside
onUnmounted()
. - Use
getComponent(id)
to debug available methods. - Use
overwrite: true
when replacing an existing component.
Want to contribute? PRs are welcome! 😊
- GitHub: GitHub Repo
- NPM: NPM Package