vue3组合API-依赖注入

provide和inject函数完成后代组件数据通讯

总结

provide函数提供数据给后代组件使用

inject函数给当前组件注入provide提供的数据和函数

父组件

<template>
  <div>
    <div>父组件</div>
    <h1>{{ money }}</h1>
    <button @click="money = 1000">111</button>
    <hr />
    <!-- <Son :money="money" @change-money="updateMoney" /> -->
    <Son v-model:money="money" />
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import Son from './son.vue'
export default {
  name: 'app',
  components: { Son },
  // 父组件的数据传递给子组件
  setup () {
    const money = ref(100)
    //  将数据提供给后代组件 provide
    provide('money', money)
    const changeMoney = (val) => {
      console.log('changeMoney');
      money.value = money.value - val
    }
    // 将函数提供给后代组件 provide
    provide('changeMoney', changeMoney)
    return { money, }
  }
}
</script>

<style>
</style>

孙组件

<template>
  <div>
    <div>孙组件</div>
    <div>{{ money }}</div>
    <button @click="fn">修改</button>
  </div>
</template>

<script>
import { inject, onMounted } from 'vue'
export default {
  name: 'grandSon',
  // 子组件接受父组件数据使用props
  props: {

  },

  setup () {
    // 接受祖先组件提供的数据
    const money = inject('money')
    // 孙组件，消费50 通知父组件app.vue组件，进行修改
    // 不能自己修改数据，遵循单向数据流原则，数据谁定义谁修改
    const changeMoney = inject('changeMoney')
    const fn = () => {
      changeMoney(50)
    }
    return { money, fn }
  }
}
</script>

<style>
</style>