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用法,以及怎么做响应式数据?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。