provide和inject传递数据

最新推荐文章于 2024-05-16 07:18:45 发布

newway007

最新推荐文章于 2024-05-16 07:18:45 发布

阅读量1.2k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/newway007/article/details/103756104

版权

Vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

provide定义在任意父组件，inject定义在需要获取数据的子组件。离子组件最近的那个provide提供的数据优先级更高：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{projectName}}</h1>
        <h1>{{appName}}</h1>
        <h1>{{ timeFlag}}</h1>
        <div>123</div>
        <Parent></Parent>



    </div>

    <script>
        const Child = {
            inject: ['appName', 'projectName'],
            template: `<div>{{projectName}}<br/> {{appName}}此时Parent修改了appName</div>`
        }
        const Parent = {
            inject: ['appName', 'timeFlag', 'projectName'],
            provide() {
                return {
                    appName: this.appName + '父级组件接收上级传来数据处理后的appName'
                }
            },
            components: {
                Child,
            },
            template: `<div>
    {{projectName}}
    <br/>
    {{appName}}
    <br/>
    <br/>
    <br/>
    <br/>

    <Child />
  
    </div>`
        }




        const projectName = '跨级组件通信';
        const app = new Vue({
            el: '#app',
            components: {
                Parent,
            },

            provide() {
                console.log(this);
                return {
                    projectName: this.projectName,

                    appName: this.appName,


                    timeFlag: this.timeFlag,
                };
            },


            data() {
                return {
                    projectName,
                    appName: '这是app名称',
                    now: Date.now(),


                };
            },
            computed: {
                timeFlag() {
                    return this.now;
                }
            },

            created() {
                setInterval(() => this.now = Date.now(), 1000);
            }
        })
    </script>

</body>

</html>

newway007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
provide和inject传递数据

provide定义在任意父组件，inject定义在需要获取数据的子组件。离子组件最近的那个provide提供的数据优先级更高：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
复制链接

扫一扫