provide \ inject使用方法

provide \ inject

vue2中

• 在祖先组件中

  //这里的provide是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
  export default{
    provide() {
      return {
        scrollToTop: this.scrollToTop,
          loadingHandle: this.loadingHandle
        }
    }
  };	
  

• 在子组件中

  //一个字符串数组，或者是一个对象。属性值可以是一个对象
  export default {
    inject: ['loadingHandle'],
    mounted(){
       this.loadingHandle(true)
    }
  }
  inject:{
    listType:{
      from:'par',//provide定义的名字
      default:1
    }
  }
  

vue3中

• 在祖先组件中

  修改父组件会影响所有子组件 是响应式的

  <script setup>
    import { provide, ref } from 'vue';
    import CountVue from './components/Count.vue';
    import ChildVue from './components/child/Child.vue';
    const count = ref(0);
    const handleAdd = ()=>{
      count.value
    };
    provide('msg',{data:{value:333}})
  </script>
  

• 在子组件中

  <script setup>
  import { inject } from "vue";
  
  const _inject = inject("msg");
  console.log(_inject);
  </script>