Vue的依赖和注入

前奏

学习一个新的知识,应该带有一些目的性,或者了解一下相关背景,带着疑问去学一个东西,至少不会那么痛苦。(不要跟我说学习是快乐的,学习哪来的快乐(￣ー￣) (￣ー￣))。

还是先看场景,比如A组件现在要传值给他的子组件B,B组件的孩子C组件也要用到这个值,C组件的孩子D组件也要用到这个值。

那么你可以选择以下2种方式实现

• 1.使用props一级一级往下传
• 2.使用vuex

但是想想,是不是都有点麻烦？

主题

介绍一下Vue的依赖和注入。

先看组件层级结构

A是B的爸爸,B是C的爸爸,C是D的爸爸

Vue提供一个provide属性,可以像后代直接提供变量使用。子组件可以使用inject属性来接受变量

话不多说上data组件部分代码

 data () {
    return {
      a: 1,
      b: {
        c: 1
      }
    }
  },
// 这样相当于往后代组件提供了a,b2个变量
  provide () {
    return {
      a: this.a,
      b: this.b
    }
  }
// 你也可以写成对象的方式,但是写成对象的方式,你里面就不能用this了,thisjiu拿不到这个组件了
  provide: {
    a: this.a, // 错误,这个this不是指向当前组件
    b: this.b
  },

B,C,D组件都可以用inject接收

上代码

  inject: {
    a: {
      type: String
    },
    b: {
      type: Object
    }
  }
// 你也可以用数组的方式接收
  inject: ['a', 'b']

问题

• 传普通变量,也就是你传个普通的字符串a,这个不是响应式的,也就是a变了,后代接收到的a值是不会改变的
• 传对象,也就是你传这个b,它是响应式的。
• 这样传值,子组件可能搞不清楚这个值是从哪里传过来的,提供值的组件也搞不清楚哪些后代注入了这个值