vue 依赖注入

• 原理：依靠provide和inject实现数据注入，provide提供数据或方法，inject注入到当前组件以获取provide提供的数据。
• 缺点：会提高组件之间的耦合性
• 解决方法：若inject注入的组件需要修改数据，建议在provide中提供方法inject中调用方法来修改数据

    import { provide, readonly, ref, reactive } from "vue";
    export default {
      name: "App",

      setup() {
        let userAge = ref(0);
        let user = reactive({
          name: "sa",
          age: userAge,
        });
        const changeName = () => {
          user.name = "zhangsan";
          userAge.value = 123;
        };
        provide("user", readonly(user));//使注入数据只读
        provide("changeName", changeName);//提供方法修改注入数据
        
      },
  }

<template>
  <div class="hello">
    <el-button  @click="changeData">123</el-button>
  </div>
</template>
import {inject, ref} from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    let count=ref(3)
    // let username=inject('userName','LiSi')
    let user=inject('user')
    let changeName=inject('changeName')
    return {count,user,changeName}
  },
  methods: {
    changeData() {
      console.log(this.changeName);
      this.changeName()
      this.user.namge="qwe"
      this.count++
    }
  },
}

注入数据通过调用provide提供的方法修改inject的数据。