Vue 3 Composition API 提供/注入在单个文件组件中不起作用 [英] Vue 3 Composition API Provide/Inject not working in Single File Components

问题描述

我正在使用 Composition API 在 VueJS 3 中创建一个库.我实现了

我的代码的一个非常简单的实现如下:

<块引用>

在项目中使用

<按钮颜色=绿色">美国广播公司</按钮></ThemeProvider><脚本>从我的图书馆"导入 { ThemeProvider, Button }导出默认{name: 'SomePage',设置() {...}，}

<块引用>

ThemeProvider.js(父组件)

import { toRefs, react, provide, h } from 'vue'导出默认{name: '主题提供者',道具:主题: {类型:对象，默认值:() =>({...}),},},设置(道具，{插槽}){const { 主题 } = toRefs(props)提供('主题'，反应性(主题.值))返回 () =>H('div',{...},slot.default())},}

<块引用>

Button.js(子组件)

import { inject, h } from 'vue'导出默认{name: '按钮',设置(道具，{插槽}){const 主题 = 注入('主题')console.log(theme)//返回未定义返回 () =>H('按钮'，{...},slot.default())},}

解决方案

对于任何有同样问题的人，代码没有问题.问题是在我的 package.json 中 'vue' 和 '@vue/compiler-sfc'(单个文件组件的 Vue 编译器)的版本不同 文件.

I'm making a library in VueJS 3 using Composition API. I implemented Provide/Inject as mentioned in docs. But the property in child component is still undefined and I get following error in browser console:

A very simple implementation of my code is as follow:

Usage In Project

<ThemeProvider>
    <Button color="green">
        ABC
    </Button>
</ThemeProvider>

<script>
    import { ThemeProvider, Button } from 'my-library'

    export default {
        name: 'SomePage',
        setup() {...},
    }
</script>

ThemeProvider.js (Parent Componen)

import { toRefs, reactive, provide, h } from 'vue'

export default {
    name: 'theme-provider',
    props:
        theme: {
            type: Object,
            default: () => ({...}),
        },
    },
    setup(props, { slots }) {
        const { theme } = toRefs(props)

        provide('theme', reactive(theme.value))

        return () =>
            h(
                'div',
                {...},
                slots.default()
            )
    },
}

Button.js (Child Component)

import { inject, h } from 'vue'

export default {
    name: 'Button',
    setup(props, { slots }) {
        const theme = inject('theme')
        console.log(theme)  // returns undefined

        return () =>
            h(
                'button',
                {...},
                slots.default()
            )
    },
}

解决方案

For anyone having the same issue, the code had no problem. The problem was the difference in version for 'vue' and '@vue/compiler-sfc' (Vue compiler for Single File Component) in my package.json file.

这篇关于Vue 3 Composition API 提供/注入在单个文件组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！