vue文档中对于函数式组件的context是这么说的:
但是实际用的时候发现有问题
这是父组件:
<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?