vue函数式组件如何使用inject?

vue文档中对于函数式组件的context是这么说的:

  • props:提供所有 prop 的对象
  • children: VNode 子节点的数组
  • slots: 一个函数,返回了包含所有插槽的对象
  • scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
  • data:传递给组件的整个数据对象,作为createElement的第二个参数传入组件
  • parent:对父组件的引用
  • listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是data.on的一个别名。
  • injections: (2.3.0+) 如果使用了inject选项,则该对象包含了应当被注入的属性。

但是实际用的时候发现有问题
这是父组件:

<template>
    <div>
        我是能provide数据的父组件<slot/>
    </div>
</template>

<script>
    export default {
        name: "ParentProvider",
        provide() {
            return {root: this}
        },
        data() {
            return {
                data:'这是父组件provide的数据'
            }
        }
    }
</script>

这是函数式的子组件:

<script type="text/jsx">
    export default {
        name: "FunctionalChild",
        functional:true,
        inject: ['root'],
        render(h, context) {
            const {root}=context.injections
            return(
                <div>{root.data}</div>
            )
        }
    }
</script>

这是页面:

<template>
    <div>
        <parent-provider>
            <functional-child/>
        </parent-provider>
    </div>
</template>

<script>
    import ParentProvider from "./components/ParentProvider"
    import FunctionalChild from "./components/FunctionalChild"

    export default {
        name: "testPage",
        components: {ParentProvider,FunctionalChild}
    }
</script>

context.injections是个空对象,是我用法不对还是函数式组件不支持inject?

阅读 2.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题