vue provide与inject的使用

阅读数:66 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、理解(隔代传值)

1、简单的来说就是有父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。需要注意的是不论子组件有多深，只要调用了inject，那么就可以注入provide中的数据。

2、由于vue有$parent属性可以让子组件访问父组件，但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松跨级访问父组件的数据。

3、类型

（1）语法

provide：Object | () => Object
inject： Array<string> | { [key: string]: string | Symbol | Object }

4、provide和inject绑定并不是可响应的，如果你传了一个可监听的对象，那么其对象的property还是可响应的，如果需要响应式，可以：

（1）传递的参数用一个方法返回

// 父组件
data() {
    return {
      name: "卷儿"
    }
  },
  provide: function() {
    return {
      newName: () => this.name
    }

// 子组件
inject: ['newName'],

（2）参数定义为一个对象

// 父组件
data() {
    return {
      obj: {
        name: "卷儿"
      }
    }
  },
  provide: function() {
    return {
    // 传递一个对象
      obj: this.obj
    }
  },
  
// 子组件
inject: ['obj'],

5、慎用provide、inject

如果有多个后代组件同时依赖于一个祖先组件提供的状态，那么只要有一个组件修改了该状态，那么所有组件都会受到影响。

二、代码解释

//父组件
provide: {
   user: 'John Doe'
 }
 --------------------
//子组件
inject: ['user']
//使用
console.log（this.user）

如果我们尝试在此处提供一些组件实例属性，这将不起作用。

 provide: {
    todoLength: this.todos.length // 将会导致错误 'Cannot read property 'length' of undefined`
  },

// 可以下面这种写法，但是数据不会响应变化
 provide() {
    return {
      todoLength: this.todos.length
    }
  },