【Vue3】通过provide和inject实现【祖组件与子组件】数据传参

一、测试解读

1、第1层传参后，3层数据都是【响应式】的，从哪一层组件改数据，三层均变化。太给力了！

2、第一层都可以向下（子层）传参，并非【根层】。

二、实现效果

三、实现代码：

1、App.vue

<template>
  <div class="app">
    <h3>我是App组件（第1层） · {{ name }}:{{ price }}</h3>
        <button @click="Change">改变值</button>

    <Class_2 />
  </div>
</template>

<script>

import { toRefs, reactive, provide } from 'vue';
import Class_2 from './components/class_2.vue'
export default {
  name: "App",
  components: { Class_2 },
  setup() {

    let pc = reactive({ name: '电脑', price: '3500' })
    provide('pc', pc) // 输出数据
    function Change() {
      alert(pc.name);
      pc.name = "笔记本"
    }
    return { ...toRefs(pc), Change }
  }

}
</script>
<style>
.app {
  background-color: rgb(216, 216, 216);
  padding: 10px;
}
</style>

2、class_2.vue

<template>
  <div class="app">
    <h3>我是子组件（第2层）· {{mpc.name}} ·  {{mpc.price}}</h3>
    <Class_3 />
  </div>
</template>
<script>

import {reactive,inject,provide} from 'vue'
import Class_3 from './class_3.vue'
export default {
  name: 'class_2',
  components: { Class_3 },
 setup() {
    let mpc=inject('pc')  // 调用
    let mColor = reactive('红色')
    provide('mColor', mColor) // 输出数据
    return {mpc,mColor}
  }
}
</script>
<style scoped>
.app {
  padding: 10px;
  /* color:red; */
  background-color: rgb(203, 252, 215);
}
</style>

3、class_3.vue

<template>
  <div class="app1">
    <h3>我是孙组件（第3层）· {{mpc.name}} ·  {{nColor}}</h3>
    <button @click="Change">第3层·改成手机</button>
  </div>
</template>

<script>

import {inject} from 'vue'
export default {
  name: 'class_3',
  setup() {
    let mpc=inject('pc')  // 调用
    let nColor=inject('mColor')  // 调用

    function Change() {
      //  alert(mpc.name);
      alert("ok");
      mpc.name = "手机"
    }
    return {mpc,nColor,Change}
  }
}
</script>
<style scoped>
.app1 {
  background-color: rgb(250, 202, 248);
  padding: 10px;
}
</style>