vue3 provide 与 inject 用法

1 说明：

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们可以使用inject来接收provide提供的数据和方法。

2 用法：

 父亲组件

<template>

  <div>

    <h1>父亲组件级别</h1>

    <label>

      <input v-model="colorVal" value="pink" name="color" type="radio">

      粉色

    </label>

    <label>

      <input v-model="colorVal" value="yellow" name="color" type="radio">

      黄色

    </label>

    <div class="box"></div>

    <hr/>

    <provideAVue></provideAVue>

  </div>

</template>

<script setup lang='ts'>

import{ref,reactive, provide, readonly} from 'vue'

import provideAVue from './provideA.vue'

const colorVal = ref<string>('red');

//不允许子组件修改父组件的值--readonly

//provide('color', readonly(colorVal))

provide('color', colorVal)

</script>

<style scoped>

  .box{

    width: 50px;

    height: 50px;

    border: 1px solid #ccc;

    /**

      vue3 特有功能

    */

    background: v-bind(colorVal);

  }

</style>

孩子组件：provideA.vue

<template>

  <div>

    <h1>孩子级别组件</h1>

    <div>

      <button @click="change">修改provide值 yellow</button>

    </div>

    <div class="box"></div>

    <hr />

  </div>

</template>

<script setup lang='ts'>

import{ref,Ref,reactive, inject} from 'vue'

//添加默认值--第一种方法

// const color = inject<Ref<string>>('color',ref('red'));

// const change =()=>{

//   color.value = 'yellow';

// }

//第二种方法

const color = inject<Ref<string>>('color');

const change =()=>{

  // 非空断言

  color!.value = 'yellow';

}

</script>

<style scoped>

  .box{

    width: 50px;

    height: 50px;

    border: 1px solid #ccc;

     /**

      vue3 特有功能

    */

    background: v-bind(color);

  }

</style>