Vue——vue3中父子组件传值provide(提供)与inject(注入)的使用

父组件

<template>
  <Student />
</template>

<script>
import {reactive,provide } from 'vue'

import Student from './components/Student.vue'
export default {

  data () {
    return {
    }
  },
  components: {
    Student
  },
  methods: {
 
  },
  setup () {
    // 学生
    const student = reactive({
      firstName: '小红',
      classname: '三年5班'
    })

    provide('student', student)
    return {  }
  },

}
</script>

子组件

<template>
  <h1>学生</h1>
  <h1>学生classname:{{ classname }}</h1>
  <h1>学生firstName:{{ firstName }}</h1>
</template>

import {  inject} from 'vue'
export default {
  setup () {
    const student = inject('student')
    return { ...student }
  },
}
</script>