Vue3 provide 和 inject的使用

Vue3 provide 和 inject的使用

provide() 和inject()的作用

provide能向后代组件传递数据，inject能在后代组件中接收来自祖先组件传递过来的数据。两个函数联合起来能实现祖孙组件间通信。

代码模版：

祖组件中：

<script>
import {provide} from 'vue'
export default {
  setup() {
    provide('msg','这是一条传递给后代的信息')
    return {};
  },
};
</script>

后代组件中：

<script>
import { inject } from "vue";

export default {
  setup() {
    let msg = inject('msg')
    return {
      msg
    };
  },
};
</script>