组件传值 provide/inject

最新推荐文章于 2024-05-20 16:40:30 发布

都挺好，刚刚好

最新推荐文章于 2024-05-20 16:40:30 发布

阅读量177

点赞数

文章标签： javascript vue.js 前端

原文链接：https://blog.csdn.net/weixin_45242865/article/details/120026192

版权

1.简介

1.Vue2.2.0 新增 API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
2.一言而蔽之：祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。

provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

2.举个例子

假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件

// A.vue
	export default {
	  provide: {
	    name: '浪里行舟'
	  }
	}
	// B.vue
	export default {
	  inject: ['name'],
	  mounted () {
	    console.log(this.name);  // 浪里行舟
	  }
	}

在这里插入图片描述

3.provide 与 inject 怎么实现数据响应式

一般来说，有两种办法：

provide 祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props，methods 等
使用 2.6 最新 API Vue.observable 优化响应式 provide (推荐)

// A 组件 
	<div>
	      <h1>A 组件</h1>
	      <button @click="() => changeColor()">改变color</button>
	      <ChildrenB />
	      <ChildrenC />
	</div>
	......
	  data() {
	    return {
	      color: "blue"
	    };
	  },
	  // provide() {
	  //   return {
	  //     theme: {
	  //       color: this.color //这种方式绑定的数据并不是可响应的
	  //     } // 即A组件的color变化后，组件D、E、F不会跟着变
	  //   };
	  // },
	  provide() {
	    return {
	      theme: this//方法一：提供祖先组件的实例
	    };
	  },
	  methods: {
	    changeColor(color) {
	      if (color) {
	        this.color = color;
	      } else {
	        this.color = this.color === "blue" ? "red" : "blue";
	      }
	    }
	  }
	  // 方法二:使用2.6最新API Vue.observable 优化响应式 provide
	  // provide() {
	  //   this.theme = Vue.observable({
	  //     color: "blue"
	  //   });
	  //   return {
	  //     theme: this.theme
	  //   };
	  // },
	  // methods: {
	  //   changeColor(color) {
	  //     if (color) {
	  //       this.theme.color = color;
	  //     } else {
	  //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
	  //     }
	  //   }
	  // }

// F 组件 
	<template functional>
	  <div class="border2">
	    <h3 :style="{ color: this.theme.color }">F 组件</h3>
	  </div>
	</template>
	<script>
	export default {
	  inject: ["theme"]
	  // inject: {
	  // 	theme: {
	  // 		from: theme,
	  // 		//函数式组件取值不一样
     	  // 		default: () => ({})
	  // 	}
	  // }
	};
	</script>

虽说 provide 和 inject 主要为高阶插件/组件库提供用例，但如果你能在业务中熟练运用，可以达到事半功倍的效果！
有关 inject 参数为对象的用法可见 provide / inject

4.项目中使用

 provide() {
    return {
      reload: this.reload
    };
  },

  provide() {
    return {
      _getMapRoot: () => {
        return this;
      },
      // 向子组件提供地图实例
      _getMapRootMap: this.getMap,
    };
  },