快捷導(dǎo)航

vue2中provide/inject的使用與響應(yīng)式傳值詳解

更新時(shí)間：2022年09月22日 08:50:59 作者：Min_Fox

Vue中 Provide/Inject實(shí)現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關(guān)于vue2中provide/inject的使用與響應(yīng)式傳值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

一、基本用法

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

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

// 子組件
inject: ['name'],

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

二、響應(yīng)式

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

// 父組件
data() {
    return {
      name: "卷兒"
    }
  },
  provide: function() {
    return {
      newName: () => this.name
    }

// 子組件
inject: ['newName'],
computed: {
   hnewName() {
     return this.newName()
   }
 }

<!-- 子組件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推薦使用這種方法 -->
<h2>{{ newName() }}</h2>

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

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

// 父組件
data() {
    return {
      obj: {
        name: "卷兒"
      }
    }
  },
  provide: function() {
    return {
    // 傳遞一個(gè)對(duì)象
      obj: this.obj
    }
  },

// 子組件
inject: ['obj'],
computed: {
	// 也可以不用計(jì)算屬性重新定義
   objName() {
     return this.obj.name
   }
 }

<!-- 子組件中的使用方法 -->
<h2>obj的name： {{objName}}</h2>
<h2>obj的name： {{obj.name}}</h2>

總結(jié)

主要解決深層次的組件嵌套，祖先組件向子孫組件之間傳值。

一層嵌套的父子組件可以使用props來(lái)傳值，props本身就是有相應(yīng)性的。

根據(jù)自身代碼選擇合適的傳值方式，并不一定非要用provide/inject的傳值。

到此這篇關(guān)于vue2中provide/inject使用與響應(yīng)式傳值的文章就介紹到這了,更多相關(guān)vue2 provide/inject響應(yīng)式傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: