如何提供具有组合 API 的函数？

Question

是否可以在Vue 3中提供一个函数，然后在子组件中调用该函数？

我知道这适用于 option API:

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

但是我怎样才能用 composition API 达到同样的效果呢？

这是我的方法：

父组件：

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

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

子组件：

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

这里是错误 Uncaught TypeError: _ctx.handleEditItem is not a function

Answer 1

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

    return { handleEditItem } 
}

在您的 Vue 2 示例中，您提供了整个组件 (this)
在 Vue 3 代码中，您只提供了 handleEdit 函数，因此当您调用 inject 时得到的只是一个函数
您忘记从 Child setup return handleEditItem - 这就是您出现错误的原因 _ctx.handleEditItem is not a function

Answer 2

我认为你可以通过传递一个对象来做到这一点，这样你就可以在需要时传递其他变量和方法。

parent.vue

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

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

如何提供具有组合 API 的函数？

How can I provide a function with composition API?

javascript

vue.js

vuejs3

vue-composition-api