vue2 provide和inject的使用

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的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。