How can I provide a function with composition API?

Question

Is it possible to provide a function in Vue 3 and then call the function in the child component?

I know that this worked with the option API:

provide() {
    return {
        $list: this,
    };
},

But how can I achieve the same with the composition API?

Here is my approach:

Parent component:

setup(props) {
    const handleEdit = (item) => {
       emit("edit", item);
    };

    provide("$list", handleEdit);
    
    return { handleEdit };
}

Child component:

setup(props) {
    const { item } = props;
    const list = inject("$list");
        
    const handleEditItem = (e) => {
        list.handleEdit(item);
    };
}

And here the error Uncaught TypeError: _ctx.handleEditItem is not a function

Daniel · Accepted Answer · 2021-03-04 17:06:52Z

2

I think you can do it by passing an object, that way you can pass other variables and methods if needed.

parent.vue

setup(props) {
    const handleEdit = (item) => {
       emit("edit", item);
    };

    provide("$list", {handleEdit}); // <= change here
    
    return { handleEdit };
}

answered Mar 4, 2021 at 17:06

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michal Levý · Accepted Answer · 2021-03-05 07:09:48Z

1

setup(props) {
    const { item } = props;
    const list = inject("$list");
        
    const handleEditItem = (e) => {
        list(item);
    };

    return { handleEditItem } 
}

in your Vue 2 example, you are providing whole component (this)
In Vue 3 code, you are providing just the handleEdit function so what you get when you call inject is again just a function
You forget to return handleEditItem from Child setup - thats why you got error _ctx.handleEditItem is not a function

edited Mar 5, 2021 at 7:09

answered Mar 4, 2021 at 16:48

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

4 Comments

Hannes A Over a year ago

Thank you! But that also not worked. Do you now how to provide the whole component with the composition API? Because this is no longer available.

Michal Levý Over a year ago

You just can't provide whole component using Composition API. And I dont think it is a good idea anyway

Dan Over a year ago

This would work too. Maybe he meant to return list as the handler rather than recreating handleEditItem in the child. (Assuming that's what he's trying to do. It's unclear.)

Michal Levý Over a year ago

The code is from OP ....I was trying to make just minimal changes required to make it work. And fail to notice the OP forget to return handleEditItem from setup. Fixed now.

Collectives™ on Stack Overflow

How can I provide a function with composition API?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related