一、在vue3中新增的祖孙之间通信的方式
provide和inject是Vue中的两个相关功能,它们一起提供了一种祖孙组件之间共享数据的方式。父组件可以使用provide来提供数据,而子孙组件可以使用inject来接收这些数据。
二、使用
父组件中部分代码
<script>
import { provide, reactive, toRefs } from "vue";
import ChildVue from "./components/ChildVue.vue";
export default {name: "App",components: {ChildVue,},setup() {let car = reactive({name: "奔驰",price: "40w",});provide('car',car) //给自己的后代传递数据return {...toRefs(car)}},
};
</script>
孙组件中部分代码
<script>
import { inject, toRefs } from 'vue'
export default {
name:'SonVue',
setup(){//使用 inject 获取祖先组件传递的数据let car = inject('car')return {...toRefs(car)}
}
}
</script>