快捷導(dǎo)航

vue3如何通過(guò)provide和inject實(shí)現(xiàn)多層級(jí)組件通信

更新時(shí)間：2023年11月28日 10:21:44 作者：Attacking-Coder

這篇文章主要介紹了vue3如何通過(guò)provide和inject實(shí)現(xiàn)多層級(jí)組件通信,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue3通過(guò)provide和inject實(shí)現(xiàn)多層級(jí)組件通信

父組件

<template>
  <div>
    <h1>我是父組件 {{num}}</h1>
    <hr>
    <child></child>
  </div>
</template>
<script setup>
import child from './child.vue';
import { ref,provide } from 'vue';
let num = ref(520)
provide('parentNum',num)
</script>

子組件

<template>
  <div>
    <h2>我是子組件</h2>
    <hr>
    <grandchild></grandchild>
  </div>
</template>
<script setup>
import grandchild from './grandchild.vue';
</script>

孫子組件

<template>
  <div>
    <h3>我是孫子組件</h3>
    <p>這是爺爺?shù)闹?{{parentNum}}</p>
    <button @click="handler">點(diǎn)擊我爺爺?shù)闹禍p100</button>
  </div>
</template>
<script setup>
import { inject } from 'vue';
let parentNum = inject('parentNum')
const handler = () => {
  parentNum.value -= 100
}
</script>

在這里插入圖片描述

擴(kuò)展：

vue3 provide 和 inject 的用法實(shí)現(xiàn)跨層級(jí)的組件通信

1.父組件利用 provide 提供數(shù)據(jù)也就是傳

<script setup>
import { provide, ref } from 'vue'
import son from './son.vue'
let msg = ref('xjj')
// 在父組件中將 msg 設(shè)置為依賴注入：能夠在所有的后代組件中使用這些數(shù)據(jù)
provide('msg', msg)
</script>
<template>
  <h2>05-組合式API - 依賴注入</h2>
  <h3>父組件</h3>
  <div>msg: {{ msg }}</div>
  <son></son>
</template>
<style></style>

2.子組件通過(guò) inject (子孫后代, 都可以拿到這個(gè)數(shù)據(jù))也就是收

<script setup>
import { inject } from 'vue'
import gson from './gson.vue'
let msg = inject('msg')
</script>
<template>
  <h3>子組件</h3>
  <div>msg: {{ msg }}</div>
  <gson></gson>
</template>
<style></style>

注意：為了給 provide/inject 添加響應(yīng)式，使用 ref 或 reactive

到此這篇關(guān)于vue3通過(guò)provide和inject實(shí)現(xiàn)多層級(jí)組件通信的文章就介紹到這了,更多相關(guān)vue3多層級(jí)組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue2中Print.js的使用超詳細(xì)講解（pdf、html、json、image）
項(xiàng)目中有用到打印功能,網(wǎng)上就找了print.js,下面這篇文章主要給大家介紹了關(guān)于vue2中Print.js使用（pdf、html、json、image）的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
動(dòng)畫詳解Vue3的Composition?Api
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細(xì)的動(dòng)畫演繹，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能(示例詳解)
最近在開(kāi)發(fā)工業(yè)品超市的后臺(tái)系統(tǒng),遇到一個(gè)需求,就是實(shí)現(xiàn)在一個(gè)table表格中多選數(shù)據(jù),在網(wǎng)上查了好多,有些方法真的是無(wú)語(yǔ),下面通過(guò)本文給大家分享vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能,感興趣的朋友跟隨小編一起看看吧
2024-05-05
vue踩坑記之npm?install報(bào)錯(cuò)問(wèn)題解決總結(jié)
當(dāng)你跑起一個(gè)項(xiàng)目的時(shí)候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報(bào)錯(cuò)問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下
2022-06-06
詳解vue 組件之間使用eventbus傳值
本篇文章主要介紹了vue 組件之間使用eventbus傳值。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
vue.js云存儲(chǔ)實(shí)現(xiàn)圖片上傳功能
示對(duì)象存儲(chǔ)是騰訊云提供的一種存儲(chǔ)海量文件的分布式存儲(chǔ)服務(wù)，本文主要介紹了用vue.js實(shí)現(xiàn)圖片上傳功能，感興趣的小伙伴們可以參考一下
2021-05-05
Vue3中導(dǎo)入和使用組件幾種常見(jiàn)方法(.vue文件)
組件是Vue.js最強(qiáng)大的功能之一, 組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要介紹了Vue3中導(dǎo)入和使用組件幾種常見(jiàn)方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vue拖拽添加的簡(jiǎn)單實(shí)現(xiàn)
本文主要介紹了vue拖拽添加的簡(jiǎn)單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
vue實(shí)現(xiàn)的多頁(yè)面項(xiàng)目如何優(yōu)化打包的步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)的多頁(yè)面項(xiàng)目如何優(yōu)化打包的步驟詳解，文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
Vue2過(guò)渡標(biāo)簽transition使用動(dòng)畫方式
這篇文章主要介紹了Vue2過(guò)渡標(biāo)簽transition使用動(dòng)畫方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07