vue3的provide-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3的provide。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。

provide：提供一个值，可以被后代组件注入。

inject：注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值

父组件

<template>
  <div>
    {{msg}}
    <A></A>
  </div>
 
</template>
<script  setup  lang="ts">
import { provide, ref } from 'vue'
let msg=ref('hello')
provide('msg',ref(msg))
</script>
<style lang="scss" scoped>
div{
  width: 4rem;
  height: 4rem;
  background-color: red;
}
</style>

子组件

<template>
    <div class="about">
      A

      <B></B>
    </div>
  </template>
  <script  setup  lang="ts">
  </script>
  <style lang="scss" scoped>
    .about{
      width: 2rem;
      height: 2rem;
      background-color: rgb(39, 168, 45);
    }
    </style>

B组件

inject如果在注入一个值时不要求必须有提供者，那么我们应该声明一个默认值

<template>
  <button @click="change">点击</button>
    <div class="abouts">
      {{msg}}
    </div>
  </template>
  <script  setup  lang="ts">
import { inject, Ref,ref} from 'vue';

  const msg=inject<Ref<string>>('msg',ref('bai'))
  const change=()=>{
    msg.value='hi'
  }
  </script>

<style lang="scss" scoped>
  .abouts{
    width: 2rem;
    height: 2rem;
    background-color: rgb(53, 47, 233);
  }
  </style>