vue2中的provide和inject

前言

我们云诊室因为是单文件富应用。一个页面无数个无数层组件，用到非常多的props和$emit，今天不小心看到 provide和inject 这两个属性，也可以用来传值，在这里记录一下。首先先来个复习。

复习

父传子：props
子传父：$emit
父获取或调用子的数据或方法：this.$ref['child']，this.$children
子获取父组件的属性或方法：this.$parents

开始

provide和inject是 提供与注入的意思，在这里我想到了nest里面service层作为provide注入到controller层，我觉得他们都使用了同一种设计模式，即 依赖-注入。

使用起来非常简单

父组件：

export default Vue.extend({
  name: "App",
  components: {
    HelloWorld,
    HelloWw,
  },
  data() {
    return {
      a: 0,
      b: 0,
    };
  },
  provide:{
    c: 'fujinting'
  },
 }

子组件或者孙组件或者重孙组件：

<template>
    <div>
        ------------{{c}}----------
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    inject:['c'],
    methods:{
        
    }
}
</script>