VUE3之Composition API（三）

setup中的provide和inject

在祖父组件中导入并使用provide函数；在子孙节点中导入并使用inject函数：

// App.vue
import {provide, ref, readonly} from 'vue';
import Home from './Home.vue';
    export default {
        components:{
            Home
        },
        setup(props) {
            const name=ref("shopkeeper");
            const counter=ref(100);

            const increment=()=>{
                counter.value++;
            };
            provide("name",readonly(name));
            provide("counter",readonly(counter));

            return {
                increment,
                counter
            }
        }
    }
</script>

// Home.vue
<script>
import {inject} from 'vue'
    export default {
        setup(props) {
            // inject函数的第二个参数是指定一个默认值，可以缺省
            const name=inject("name");
            const counter=inject("counter");
            const homeIncrement=()=>{
                counter.value++;
            }
            return {
                name,
                counter,
                homeIncrement
            }
        }
    }
</script>

一般的设计习惯是，数据不允许在子孙组件中修改，所以祖父组件在provide函数传参时一般传入readOnly对象。