组合API-依赖注入

目标: 掌握使用provide函数和inject函数完成后代组件数据通讯

使用场景: 有一个父组件,里面有子组件,里面有很多后太组件,共享父组件数据。

祖先组件 App.vue

<template>
  <h1>父组件</h1>
  <!-- <reactive></reactive> -->
  <!-- <life /> -->
  <!-- <toRefVue /> -->
  <!-- <toRefsVue /> -->
  <!-- <refVue></refVue> -->
  <!-- <composeApiDemoVue></composeApiDemoVue> -->
  <!-- <computedVue />  -->
  <!-- <watchVue />  -->
  <!-- <parentChidChatVue :msg="msg" @change-msg="changeMsg"/> -->
  <provideInjectVue />

 <!-- <button @click="changeMoney">修改money</button> -->
</template>
<script>
import {provide, ref} from 'vue'
import provideInjectVue from './components/provideInject.vue'
// import parentChidChatVue from './components/parentChidChat.vue'
// import computedVue from './components/computed.vue'
// import life from './components/life.vue'
// import reactive from './components/reactive.vue'
// import toRefVue from './components/toRef.vue'
// import toRefsVue from './components/toRefs.vue
// import watchVue from './components/watch.vue'
// import Ref_shuxing from './components/ref_shuxing.vue'
// import refVue from './components/ref.vue'



export default {
  name: 'App',
  components: {
    // life
    // reactive
    // toRefVue
    // refVue,
    // computedVue
    // Ref_shuxing
    provideInjectVue
  },

// 1.setup是一个新的组件选项,作为组件中使用组合API的起点
// 2.从组件的生命周期来看,它的执行在组件实例创建前`vue2.x的beforeCreate`执行
// 3.这就意味着在setup函数中this还不是组件实例，此时是undefined。
// 4.在模板中需要使用的数据和函数,需要在setup返回
  setup(){
       //  定义数据和函数
      //   console.log('setup',this)
      //    let  msg  = ref("hi vue3.0")
      //    const  say = ()=>{
      //       console.log('我是方法');
      //     }

      //  function changeMsg(val){
      //      msg.value = val
      //  }
      //  return {
      //   msg,
      //   say,
      //   changeMsg
      //  }   

    //  将数据提供给后代组件 provide
    const  money  = ref(100);
    provide('money',money)

  
    function changeMoney (val){
      money.value -= val
    }
    //  将修改数据的方法提供给后台组件 provide
    provide('changeMoney',changeMoney)  


  
    return {
      money
    }

  }
}
</script>

父组件 provideInject.vue

<template>
    <div class="provideInject">
      子组件 接收父组件的前{{money}}
      <ProvideSon />
    </div>  
</template>

<script>
import { inject } from 'vue'
import ProvideSon from './provideSon.vue'
export default { 
   name:'provideInject',
   components:{
    ProvideSon
   },
   props:{
    msg:{
        type:String,
        default:''
    }
   },
   setup(){
    // 接收组件组件提供的数据
    const  money = inject( 'money')
    return {money}
   }  
    
}
</script>

孙组件 provideSon.vue

<template>
    <div class="provideSon">
        provideSon接收祖先组件 {{money}}

        <button @click="changeMoney(20)">消费20</button>
    </div>
</template>

<script>
import { inject } from 'vue'
export default { 
   name:'provideSon',
   setup(){

     //1. inject获取祖先组件传递的数据
     const  money  = inject('money')


      /*
      如何修改money，然后通知App祖先组件。
     不能直接修改数据，得遵循单向数据流原则，得通知父组件自改。
     **/

     //2. inject获取组件组件传递的修改数据的方法
      
      const changeMoney = inject('changeMoney')

       return {money,changeMoney}
   }  
    
}
</script>

总结

• provide 函数提供数据和函数给后代组件使用。
• inject 函数给当前组件注入provide提供的数据和函数。