文章目錄

• 前言
• 一、基本用法
• 二、響應式
• • 1.方法一：傳遞的參數(shù)用一個方法返回
  • 2.方法二：把需要傳遞的參數(shù)定義成一個對象
• 總結

---

前言

官網(wǎng)概念：這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在其上下游關系成立的時間里始終生效。

---

一、基本用法

在父組件中使用provide傳值，在子組件中用inject接收。

// 父組件 data() {return {name: "卷兒"} }, provide: function() {return {name: this.name}}, // 子組件 inject: ['name'],

這種方法傳遞過來的數(shù)據(jù)是沒有響應性的，當你改變父組件中的name時，子組件中接收的name并不會改變。
官方解釋：provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的 property 還是可響應的。

二、響應式

1.方法一：傳遞的參數(shù)用一個方法返回

// 父組件 data() {return {name: "卷兒"}},provide: function() {return {newName: () => this.name} // 子組件 inject: ['newName'], computed: {hnewName() {return this.newName()}} <!-- 子組件中的使用方式 --> <h2>{{ hnewName }}</h2> <!-- 推薦使用這種方法 --> <h2>{{ newName() }}</h2>

2.方法二：把需要傳遞的參數(shù)定義成一個對象

官方解釋：provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的 property 還是可響應的。

// 父組件 data() {return {obj: {name: "卷兒"}}},provide: function() {return {// 傳遞一個對象obj: this.obj}}, // 子組件 inject: ['obj'], computed: {// 也可以不用計算屬性重新定義objName() {return this.obj.name}} <!-- 子組件中的使用方法 --> <h2>obj的name： {{objName}}</h2> <h2>obj的name： {{obj.name}}</h2>

---

總結

主要解決深層次的組件嵌套，祖先組件向子孫組件之間傳值。
一層嵌套的父子組件可以使用props來傳值，props本身就是有相應性的。
根據(jù)自身代碼選擇合適的傳值方式，并不一定非要用provide/inject的傳值。

總結

以上是生活随笔為你收集整理的vue2中provide/inject的使用和响应式传值的全部內容，希望文章能夠幫你解決所遇到的問題。

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