前言

我们云诊室因为是单文件富应用。一个页面无数个无数层组件,用到非常多的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>
Logo

前往低代码交流专区

更多推荐