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"
                });
            }
        }
    },