简介:大家可能知道常规组件传值,父传子使用子组件定义好的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>