跳到主要内容

provide

2023年05月06日
柏拉文
越努力，越幸运

一、组合式​

provide() 提供一个值，可以被后代组件注入。与注册生命周期钩子的 API 类似，provide() 必须在组件的 setup() 阶段同步调用。

1.1 语法​

provide(key,value);

  • key: 要注入的 key, 可以是一个字符串或者一个 symbol

  • value: 要注入的值

1.2 通信​

provide 和 inject 如果绑定的是基础数据, 那么是非响应的。 provide 和 inject 如果绑定的是响应式的对象，那么对象的 property 是可响应的

<template>
  <div>
    {{ a }}

    <button @click="changeA(a+1)">父组件按钮</button>
    <Child></Child>
  </div>
</template>

<script setup lang="ts">
import { provide, reactive, ref } from "vue";
import Child from "./Child.vue"

const a = ref(0);
const changeA = (value: number)=>{
  a.value = value;
}

const b = reactive({
  a,
  changeA,
});

provide('a',a.value);
provide('b',b);
</script>

二、选项式​

provide 用于提供可以被后代组件注入的值。请注意，注入绑定并非响应式的。这是有意为之的一个设计。如果要注入的值是一个响应式对象，那么这个对象上的属性将会保留响应性。

2.1 语法​

provide: {
  a: this.a,
  b: this.b,
  state: {
    a: this.a,
    b: this.b,
    changeA: this.changeA
  }
},
data(){
  return {
    a: 0,
    b: {
      c: 1
    }
  }
},
methods:{
  changeA(value){
    this.a = value;
  }
}

2.2 通信​

provide 和 inject 如果绑定的是基础数据, 那么是非响应的。 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>