vue3：如何进行组件间的信息传递

这里以父组件——主页面 | 子组件1——对话框 | 子组件2——按钮为例

父组件——主页面

import {provide, ref} from "vue";
# 创建对象，并且其有一个value属性，现在定义为false
const dialogVisible=ref(false);
const setdialogVisible=(value)=>{
  dialogVisible.value=value;
}
# 向下传递响应式的数据或函数，使得子组件可以访问使用
provide('dialogVisible',{
  dialogVisible,
  setdialogVisible
})

子组件——按钮

import { ref,inject } from 'vue'
# 使用inject，从祖先组件获取provide提供的内容
const { setdialogVisible,dialogVisible }=inject('dialogVisible')
const handleClick = () => {
  setdialogVisible(true)
}

子组件——对话框

import {inject} from "vue";
const {dialogVisible} = inject('dialogVisible')