Vue依赖注入(provide/inject)

最近在看element-ui的源码,发现了一个这样的属性:inject

provider/inject:简单的来说就是在父组件中通过provider来注入,然后在子组件中通过inject来引用。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

官方文档:https://cn.vuejs.org/v2/api/#provide-inject

需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据,而不是局限于只能从当前父组件的prop属性来获取数据。

例子1:传值

<!-- 父组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import childOne from "../components/ChildOne";
export default {
  name: "Parent",
  provide() {
    return {
      demo: "hello Parent"
    };
  },
  components: {
    "child-one":childOne
  }
};
</script>
<!-- 子组件1 -->
<template>
  <div>
    {{ ChildOne }}
    <child-two></child-two>
  </div>
</template>

<script>
import childTwo from "./ChildTwo";
export default {
  name: "child-one",
  inject: ["demo"],
  data() {
    return {
      ChildOne: this.demo
    };
  },
  components: {
    "child-two":childTwo
  }
};
</script>
<!-- 子组件2 -->
<template>
  <div>
    {{ ChildTwo }}
  </div>
</template>

<script>
export default {
  name: "child-two ",
  inject: ["demo"],
  data() {
    return {
      ChildTwo: this.demo
    };
  }
};
</script>

2 个子组件中我们使用jnject注入了provide提供的变量demo,并将它提供给了data属性。

2019-11-26T01:48:44.png

从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。

例子2:调用父组件方法

其实,不仅仅是传值,还可以调用方法,例如

<!-- 父组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import childOne from "./components/ChildOne";
export default {
  name: "Parent",
  provide() {
    return {
      reload: this.reload
    };
  },
  components: {
    "child-one":childOne
  },
  methods: {
    reload() {
      console.log("hello Parent")
    }
  }
};
</script>
<!-- 子组件1 -->
<template>
  <div>
    childOne
  </div>
</template>

<script>
export default {
  name: "child-one",
  inject: ["reload"],
  mounted() {
    this.reload();
  },
};
</script>

2019-11-26T02:03:06.png

总结

provide/inject 是解决组件之间的通信问题的利器,不受层级结构的限制,但也不是随便去滥用,通信代表着耦合!官方其实也不推荐直接用于应用程序代码中。

标签: VUE

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

添加新评论