学习Vue3 第二十一章（provide和inject）

父组件

<template>
  <Card />
</template>
<script setup>
import { ref, reactive, provide } from 'vue'
import Card from './components/Card.vue'
const name = ref(0)
const count = reactive({ num: 0 })

provide('name', count)
</script>

<style scoped></style>

子组件

<template>
  <div>22</div>
  <div>{{ name }}</div>
  <button @click="click">修改</button>
</template>
<script setup>
import { ref, inject } from 'vue'
const name = inject('name', 'defaultName')
console.log(name)

const click = () => {
  // name.value = 'newName' // 传过来是ref 子组件可以直接修改
  name.num = 'newName' // 传过来是reactive 子组件能直接修改
}
</script>
<style scoped lang="scss"></style>