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>export default {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: () => {return this.msg}}},

子组件:

<template><div class="Sun">sun组件{{ grandpaMsg() }}</div></template><script>export default {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响应式数据了.

总结

以上是生活随笔为你收集整理的VUE2中provide 和 inject用法,以及怎么做响应式数据?的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。