vue2中provide/inject的使用與響應(yīng)式傳值詳解
前言
官網(wǎng)概念:這對選項(xiàng)需要一起使用,以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴,不論組件層次有多深,并在其上下游關(guān)系成立的時(shí)間里始終生效。
一、基本用法
在父組件中使用provide傳值,在子組件中用inject接收。
// 父組件 data() { return { name: "卷兒" } }, provide: function() { return { name: this.name } },
// 子組件 inject: ['name'],
這種方法傳遞過來的數(shù)據(jù)是沒有響應(yīng)性的,當(dāng)你改變父組件中的name時(shí),子組件中接收的name并不會(huì)改變。
官方解釋:provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而,如果你傳入了一個(gè)可監(jiān)聽的對象,那么其對象的 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è)對象
官方解釋:provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而,如果你傳入了一個(gè)可監(jiān)聽的對象,那么其對象的 property 還是可響應(yīng)的。
// 父組件 data() { return { obj: { name: "卷兒" } } }, provide: function() { return { // 傳遞一個(gè)對象 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來傳值,props本身就是有相應(yīng)性的。
根據(jù)自身代碼選擇合適的傳值方式,并不一定非要用provide/inject的傳值。
到此這篇關(guān)于vue2中provide/inject使用與響應(yīng)式傳值的文章就介紹到這了,更多相關(guān)vue2 provide/inject響應(yīng)式傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 的keep-alive緩存功能的實(shí)現(xiàn)
本篇文章主要介紹了vue 的keep-alive緩存功能的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03vue 通過 Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 通過 Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他們之家的區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11vue中的this.$router.push()路由傳值方式
這篇文章主要介紹了vue中的this.$router.push()路由傳值方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue如何使用mapbox對當(dāng)前行政區(qū)劃進(jìn)行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對當(dāng)前行政區(qū)劃進(jìn)行反選遮罩問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10