组件实时信息传输,不使用props

50 阅读1分钟

通过组件依赖注入的的方式实现值得传递

组件实时信息传输,不使用props

vue版本:3 依赖注入:

//父组件
<script setup> 
import { ref, provide } from 'vue' 
const count = ref(0) 
provide('key', count)
</script>

注入的值可以是基础数据类型,也可以是ref对象,注入ref对象可以不被解析,保证数据的响应式状态,注入位置需要在父级组件或app.vue来注入。

依赖的使用:

//子组件
<script setup> 
import { inject } from 'vue' 
const message = inject('message') 
</script>