其他---11依赖注入

简介：大家可能知道常规组件传值，父传子使用子组件定义好的props值，子传父可以使用子组件里面定义的时间this.$emit();然后很多层的情况，一层一层慢慢传太慢，vue提供了依赖注入的钩子：provide/inject

步骤一：app.vue文件中

<template >
    <div @click="chooseImage">其他</div>
</template>
<script>
    export default{
        // 依赖注入，用来将app.vue文件中的方法共享出去(步骤二是接受方式，在sku_card_children中有)
        provide(){//步骤一
            return{
                app:this,//把this通过app共享给其他组件
            }
        },
        name:"goodss",
        data(){
            return{
                maxChooseImg:0
            }
        },
        methods:{
           show(){
               console.log('a');
           }
        }
    }
</script>
            
<style>
            
</style>

 

步骤二：其他文件中或组件中

<template >
    <div @click="chooseImage">其他</div>
</template>
<script>
    export default{
        inject:['app'],//依赖注入，步骤二，用于接受步骤一(在app.vue中)传过来的数据
        name:"goodss",
        data(){
            return{

            }
        },
        methods:{
            chooseImage(){//使用
                this.app.show((res)=>{//将函数以参数的形式传到App.vue文件中,并得到一个返回值
                    console.log(res);//res代表选择后返回的数据
　　　　　　　　　 })
            }
        }
    }
</script>
            
<style>
            
</style>