vue3+vite+ts--provide 和 inject 用法

目录

一、Vue2 的 provide / inject 使

二、Vue3 的 provide / inject 使用

 总结：

---

- 如果子组件嵌套太多如果使用父传子的话就需要属性绑定然后prop进行接受，这样会很麻烦。而provide和inject就可以避免这样的麻烦

一、Vue2 的 provide / inject 使

1. 用provide ：是一个对象，里面是属性和值。

provide:{
 
 appData:"我是app组件传过来的"
 
}
//如果 provide 需要使用 data 内的数据时，这样写就会报错。需要将 provide 转换为返回对象的函数。

provide(){
 
 return{
 
  appData: this.datas
 
 }
 
}

2. inject ：是一个字符串数组。

inject: [ 'appData' ]
 console.log("接收数据：", this.appData) // 接收数据：我是app组件传过来的

3.provide / inject 类似于消息的订阅和发布。provide 提供或发送数据， inject 接收数据。

二、Vue3 的 provide / inject 使用

1.provide 函数接收两个参数：provide( name,value )

<template>
  <div class=""><son></son></div>
</template>

<script lang="ts" setup>
import son from './components/son.vue';
import { provide } from 'vue';
provide('appData', '我是app组件传过来的');
</script>
<style lang="scss" scoped></style>

2.inject 函数有两个参数：inject(name,default)

<template>
  <div class="">
    <h1>我是子组件：{{ getAppData }}</h1>
  </div>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue';
const getAppData = ref(inject('appData'));
</script>

<style lang="scss" scoped></style>

3.结果

 总结：

1. provide / inject 类似于消息的订阅和发布，遵循 vue 当中的单项数据流，什么意思呢？就是数据在哪，修改只能在哪，不能在数据传递处修改数据，容易造成状态不可预测。

2. 在订阅组件内修改值的时候，可以被正常修改，如果其他组件也使用该值的时候，状态容易造成混乱，所以需要在源头上规避问题。