provide不能传计算属性数组

场景:今天在项目中想用provide对孙子组件进行传餐,正好父组件会有一个计算属性的数组,发现在孙组件inject进来的数组总是空的,但是之前provide一个data属性的数组是可以的,不知是不是vue一个缺陷,我做了demo,发现计算属性是对象可以inject进来,但是数组就是不行

总的demo代码如下:

<template>
    <div style='border:solid 1px blue;padding: 10px'>
        说明:用provide传computed数组传不过来,只能通过传父组件实例获取<br><br>
父组件:<br>
       provide计算属性数组{{computeData}}<br><br>
       <test/>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                arr: [],
                obj: {
                    key:'test'
                }
            }
        },
        computed:{
            computeData() {
                return this.arr.filter(item=>item.flag)
            },
            computeObj() {
                return {
                    ...this.obj,
                    name:'test2222222'
                }
            }
        },
        provide() {
            return {
                computeData: this.computeData,
                myFather: this,
                fatherObj: this.obj,
                computeObj: this.computeObj
            }
        },
        components:{
            test:{
                render() {
                    return <div style='border:solid 1px black;padding: 10px'>
                    这是子组件:<br/>
                    
                    <b>inject计算属性:</b><br/>
                    数组:{JSON.stringify(this.computeData)}<b style='color:red'>(无法传计算属性数组过来)</b><br/>

                    对象:
                    {JSON.stringify(this.computeObj)}<b>(可以传计算属性对象过来)</b><br/>
                    <br/>
                   <b> inject 普通data属性:</b><br/>
                    对象:{JSON.stringify(this.fatherObj)}<br/>
                    直接读取父组件属性:{JSON.stringify(this.myFather.computeData)}
                    </div>
                },
                inject: ['computeData','myFather','fatherObj','computeObj']
            }
           
        },
        mounted() {
            this.arr = [{
                id: 1,
                flag: false
            },{
                id:2,
                flag: true
            }]
        }
    }
</script>
<style>
</style>

最后想传计算属性数组,只能把父对象的实例通过provide提供出去,然后获取到实例,自然能获取到计算属性

# vue 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×