常用的方法就不寫(xiě)了，主要分享下provide/inject（提供/注入）的方法
可以實(shí)現(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: "來(lái)自父親的參數(shù)"})provide("name", computed(()=> params.name)); //用計(jì)算屬性返回值能夠動(dòng)態(tài)傳遞來(lái)子/孫組件（當(dāng)子孫組件通過(guò)方法觸發(fā)修改name值時(shí)）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組件傳來(lái)的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)聽(tīng)name的變化})return {name,changeName,};}, }); </script>

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

總結(jié)

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

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