Vue3 Provide / Inject跨越组件使用数据

作者: 温新

分类: 【Vue.js】

阅读: 2225

时间: 2021-08-09 15:51:30

作者：温新

时间：2021-08-09

hi，我是温新，一名PHPer

子组件接收父组件的数据使用props，如有这样一个结构：A-B-C...组件之间相互使用，A中使用B，B使用了C，要想使用父组件的数据，就必须一层一层的通过prop传递下去，要是有N层呢？

C中要直接使用A中的数据该怎么办？Vue3提供了相关的方法。provide提供跨组件使用的数据（简单的理解就是共享数据），要想使用这个共享数据就必须使用inject来接收这个数据。下面看案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Provide / Inject</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        const app = Vue.createApp({
            data () {
                return { count:1 }
            },
            // 提供跨越组件使用的数据
            provide(){
                return {count:this.count}
            },
            template:`<one :count="count"></one>`
        });

        app.component('one', {
            // 接收父组件传递的数据
            props:['count'],
            template:`<div>子组件ONE {{ count }}<hr><two></two></div>`
        });

        app.component('two', {
            // 跨越组件使用数据
            // 跨过one组件，直接使用根组件数据
            inject:['count'],
            template:`<div>嵌套子组件<p>{{count}}</p></div>`
        });

        app.mount('#app');
    </script>

</body>
</html>

我是温新

第天进步一点，就一点点

请登录后再评论