常用的方法就不寫了，主要分享下provide/inject（提供/注入）的方法
可以實現(xiàn)跨層組件（祖孫）間通信，不需要將數(shù)據(jù)一層一層向下傳遞

//父組件 Father.vue <template><son></son> </template> <script>import { defineComponent, reactive, provide, computed } from "vue";import son from "@/components/Son";export default defineComponent({components: {son},setup() {let params = reactive({name: "來自父親的參數(shù)"})provide("name", computed(()=> params.name)); //用計算屬性返回值能夠動態(tài)傳遞來子/孫組件（當(dāng)子孫組件通過方法觸發(fā)修改name值時）function changeName(val){params.name = val; //子孫組件觸發(fā)}provide("changeName",changeName);}}) </script> //兒子組件 Son.vue <template><h2>{{ name }}</h2> <button @click="changeName('兒子組件觸發(fā)')">兒子組件觸發(fā)Name修改</button><div class="grandson"><grandson></grandson></div> </template> <script> import grandson from "@/components/grandson"; import { defineComponent, inject } from "vue"; export default defineComponent({components: { grandson },setup() {let name = inject("name"); //接收Father組件傳來的namelet changeName = inject("changeName"); //接收方法return {name,changeName,};}, }); </script> //孫子組件 grandson.vue <template><h2>{{ name }}</h2><button @click="changeName('孫子組件觸發(fā)')">孫子組件觸發(fā)Name修改</button> </template> <script> import { defineComponent, inject, watch } from "vue"; export default defineComponent({name: "HelloWorld",setup() {let name = inject("name");let changeName = inject("changeName");watch(name,(newValue,oldValue)=>{//這里可以監(jiān)聽name的變化})return {name,changeName,};}, }); </script>

子孫組件都接收到Father組件傳來的參數(shù)"來自Father組件的參數(shù)"。
當(dāng)點擊兒子組件或者孫子組件按鈕時，觸發(fā)changeName事件在Father組件上name值也會改變。

總結(jié)

以上是生活随笔為你收集整理的vue3跨层级通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。