provide & inject

2023年03月20日

柏拉文

越努力，越幸运

一、认识

---

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

二、语法

---

2.1 provide

provide: Object | () => Object

Object 语法

provide:{
    a: this.xxx, 
    b: "",
}

() => Object 语法

provide(){
    return {
        a: this.xxx, 
        b: "",
    }
}

2.2 inject

inject: Array<string> | { [key: string]: string | Symbol | Object }

Array<string> 语法

inject:["a","b"]

{ [key: string]: string 语法

inject:{
    a: "a",
    b: "b"
}

{ [key: string]: Symbol 语法

{ [key: string]: Object 语法

inject:{
    a: {
        from: "a",
        default: ""
    },
    b: {
        from: "b",
        default: ()=>{
            return ""
        }
    }
}

三、应用

---

3.1 非响应式通信

provide 和 inject 如果绑定的是基础数据, 那么是非响应的

父组件

<template>
  <div>
    <HelloWorld></HelloWorld>
    <button @click="add">增加 Value</button>
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      value: 0,
    };
  },
  provide() {
    return {
      value: this.value,
    };
  },
  methods: {
    add() {
      this.value = this.value + 1;
      console.log(this.value);
    },
  },
};
</script>

子组件

<template>
  <div>
    {{  this.value }}
  </div>
</template>

<script>
export default {
  inject:{
    value: {
      from: "value",
      default: 0
    }
  },  
};
</script>

3.2 可响应式通信

provide 和 inject 如果绑定的是响应式的对象，那么对象的 property 是可响应的

父组件

<template>
  <div>
    <HelloWorld></HelloWorld>
    <button @click="addNum">App 组件 增加 State.Num</button>
    <button @click="addListItem">App 组件 增加 State.List</button>
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      state: {
        num: 0,
        list: [],
      },
    };
  },
  provide() {
    return {
      state: this.state,
      addNum: this.addNum,
      addListItem: this.addListItem
    };
  },
  methods: {
    addNum() {
      this.state.num = this.state.num + 1;
    },
    addListItem(){
      const item = this.state.num;
      this.state.list.push(item)
    }
  },
};
</script>

子组件

<template>
  <div>
    {{ this.value.num }}

    <ul>
      <li :key="index" v-for="(item,index) in value.list">{{ item }}</li>
    </ul>

    <button @click="addListItem">HelloWorld 组件 增加 State.List</button>

  </div>
</template>

<script>
export default {
  inject: {
    value: {
      from: "state",
      default: () => {
        return { num: 0, list: [] };
      },
    },
    addNum: {
      from: "addNum"
    },
    addListItem: {
      from : "addListItem"
    }
  },
};
</script>