Vue3-provide 和 inject 跨组件传递数据
- 功能:将数据从App组件跨过一个组件传递到B组件中
- provide:提供数据
- inject:接收数据
// App.vue
<template><h2>我是App组件({{num}})</h2><A></A>
</template><script setup>import A from './components/A.vue'import { provide, ref } from 'vue'let num = ref(1)provide('app', num)
</script>
// A.vue
<template><h2>我是A组件</h2><B></B>
</template><script setup>import B from './B.vue'
</script>
// B.vue
<template><h2>我是B组件({{num}})</h2>
</template><script setup>import { inject } from "vue";let num = inject('app')
</script>