Vue项目依赖注入的使用

Vue项目依赖注入

---

---

前言

官方解释：在这个组件里，所有 组件google-map 的后代都需要访问一个 getMap 方法，以便知道要跟哪个地图进行交互。不幸的是，使用 $parent property 无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例选项：provide 和 inject。

<google-map><google-map-region v-bind:shape="cityBoundaries"><google-map-markers v-bind:places="iceCreamShops"></google-map-markers></google-map-region>
</google-map>

provide 选项允许我们指定我们想要提供给后代组件的数据/方法。

provide: function () {return {getMap: this.getMap}
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的 property。

inject: ['getMap']

地址：添加链接描述

---

一、本文要实现什么

项目的后台有添加图片按钮和功能实现，当点击后台的添加图片按钮时，需展示弹窗，弹窗内显示前台的图片。
由于后台的添加图片按钮较多，为了避免弹出层代码的多次渲染，因此将弹出层写在app.vue文件中，并将值传回组件中。

二、步骤

1.父组件传值

imageModel绑定弹窗事件
confirm点击确定关闭弹窗

 <!-- 消息弹窗的设计，写在其他页面都不利于维护，且会造成渲染多次的情况，因此写在此处 --><el-dialog title="提示" :visible.sync="imageModel" width="30%"><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="confirm">确 定</el-button></span></el-dialog>

  // 通过依赖注入，把this传递到子组件，并且在其他的子组件中，使用app. 便可以进行调用provide(){return{app:this}},data(){return {imageModel:false}},methods:{show(){this.imageModel=true},confirm(){// 接收选中的图片// 关闭弹窗this.hide()},hide(){this.imageModel=false}

2.子组件接收

接收值

inject: ['app'],

为子组件创建点击事件chooseImage

 <!-- 图片选择 --><span v-else class="btn btn-light border"@click="chooseImage"><i class="el-icon-plus"></i></span>

调用app中的方法

    methods: {// 选择图片chooseImage(){this.app.show();  }}

此时便可以实现点击添加图片，弹窗出现