VUE3之Component（二）

Provide引用data和响应式

provide传递data中的数据，应该将provide定义为function，然后return一个对象（就如同data的使用方式一样），这样就能使用this来访问data中的数据：

        provide(){
            return {
                name:"sk",
                age:18,
                length:this.names.length
            }
        },
        data(){
            return{
                names:["abc","cba","nba"]
            }
        },

如果想让provide的数据是响应式的，就需要使用vue中的computed方法，该方法返回的是一个ref对象，需要使用value来取出值：

// App.vue
        provide(){
            return {
                name:"sk",
                age:18,
                // ref对象，value
                length: computed(()=>this.names.length)
            }
        },

// HomeContent.vue
<template>
    <div>
        HomeContent: {{name}} - {{age}} - {{length.value}}
    </div>
</template>