provide提供

inject注入

兩者組合一起使用：表示 父組件像子組件或孫組件或孫孫組件傳值。

官網鏈接：API — Vue.js

vue項目中使用：

父組件：（provide是個方法，return要傳遞出去的值）

export default {name: "header-index",data(){return{dateTime:moment().format("YYYY-MM-DD HH:mm:ss"),dateTimeF:Function,provideTheme:{value:localStorage.getItem("theme") || "light"}};},provide(){return {theme:this.provideTheme};},mounted() {this.dateTimeF = setInterval(()=>{this.dateTime = moment().format("YYYY-MM-DD HH:mm:ss");}, 1000);document.body.setAttribute("theme", this.provideTheme.value);}, }

子組件：

export default {name: "home-index",components: {ModalMarker},inject: { // 注入父組件傳的值，可以寫一個默認的值，如果父組件沒有返回數據的話theme: {default: "light"}}, }

子組件接收到父組件傳的值后，使用時，和data中定義的值的使用方法一致。

下面是在watch中的使用：

watch: {"theme.value"() {if (this.theme.value === "dark") {this.map.setMapStyleV2({styleId: "23cc8c10de12994678963ac6a11467c6",});this.pieInMap.reloadOption({labelColor:"#ffffff"});} else {this.map.setMapStyleV2({styleId: "f58a77e5d043237e413a14ddc0315a2c",});this.pieInMap.reloadOption({labelColor:"#000000"});}}},

總結

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

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