VUE2中provide 和 inject用法,以及怎么做响应式数据?

1. provide/inject说明

provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深,都可以通过inject 来访问到provide的数据.

2. provide/inject 具体用法:

三个组件: Home组件 - Provide组件 - Sun组件(最底层)
在provide 组件中:

data(){return{msg:'Home组件的msg'}},components:{LeftTop, LeftCenter, ProvideC},provide(){return{grandpaMsg:this.msg
        }},

在sun组件中:

<template><div class="Sun">
        sun组件
        {{ grandpaMsg }}</div></template><script>exportdefault{data(){return{}},inject:['grandpaMsg']}</script>

这时页面上就会展示grandpaMsg的值了,但是vue中执行顺序是

data -> provide -> created -> mounted

如果在Home组件中mounted生命周期函数中改变msg的值

mounted(){this.msg ='Home组件中msg的值被改变啦'}

页面还是之前msg的值

这种方法传递过来的数据是没有响应性的，当你改变父组件中的msg时，子组件中接收的grandpaMsg并不会改变。.

官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

3. provide/inject 实现响应式

方法一：传递的参数用一个方法返回

父组件:

provide(){return{grandpaMsg:()=>{returnthis.msg
            }}},

子组件:

<template><div class="Sun">
        sun组件
        {{grandpaMsg()}}</div></template><script>exportdefault{data(){return{}},components:{},inject:['grandpaMsg'],mounted(){}}

方法二: 把需要传递的参数定义成一个对象

父组件:

data(){return{obj:{msg:'Home组件的msg'}}},components:{LeftTop, LeftCenter, ProvideC},provide(){return{grandpaMsg:this.obj
        }},mounted(){this.obj.msg ='Home组件中msg的值被改变啦'}

子组件:

inject:['grandpaMsg'],

使用:

<div class="Sun">
        sun组件
        {{ grandpaMsg.msg }}</div>

这样就实现Provide/Inject响应式数据了.