Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
Provide / Inject
通常，當(dāng)我們需要從父組件向子組件傳遞數(shù)據(jù)時(shí)，我們使用 props。想象一下這樣的結(jié)構(gòu)：有一些深度嵌套的組件，而深層的子組件只需要父組件的部分內(nèi)容。在這種情況下，如果仍然將 prop 沿著組件鏈逐級傳遞下去，可能會(huì)很麻煩。
官網(wǎng)的解釋很讓人疑惑，那我翻譯下這幾句話：
provide 可以在祖先組件中指定我們想要提供給后代組件的數(shù)據(jù)或方法，而在任何后代組件中，我們都可以使用 inject 來接收 provide 提供的數(shù)據(jù)或方法。
看一個(gè)例子
父組件傳遞數(shù)據(jù)
<template>
<div class="App">
<button>我是App</button>
<A></A>
</div>
</template>
<script setup lang='ts'>
import { provide, ref } from 'vue'
import A from './components/A.vue'
let flag = ref<number>(1)
provide('flag', flag)
</script>
<style>
.App {
background: blue;
color: #fff;
}
</style>子組件接受
<template>
<div style="background-color: green;">
我是B
<button @click="change">change falg</button>
<div>{{ flag }}</div>
</div>
</template>
<script setup lang='ts'>
import { inject, Ref, ref } from 'vue'
const flag = inject<Ref<number>>('flag', ref(1))
const change = () => {
flag.value = 2
}
</script>
<style>
</style>TIPS 你如果傳遞普通的值 是不具有響應(yīng)式的 需要通過ref reactive 添加響應(yīng)式
使用場景
當(dāng)父組件有很多數(shù)據(jù)需要分發(fā)給其子代組件的時(shí)候， 就可以使用provide和inject。
總結(jié)
到此這篇關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject的文章就介紹到這了,更多相關(guān)Vue3依賴注入Provide/Inject內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue3打包部署報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue實(shí)現(xiàn)打印指定組件內(nèi)容的示例詳解
這篇文章主要和大家分享一下vue中打印指定組件內(nèi)容,多頁打印自動(dòng)適配紙張大小打印的方案,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-03-03
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
Vue-cli 使用json server在本地模擬請求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請求數(shù)據(jù)的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Vue-cropper 圖片裁剪的基本原理及思路講解，本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-04-04
不過 Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計(jì)概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
Vue使用MD5對前后端進(jìn)行加密的實(shí)現(xiàn)
前后端分離的項(xiàng)目，遇到了對密碼進(jìn)行加密的情況，在前端或者是在后端加密都是可以的，本文主要介紹了Vue使用MD5對前后端進(jìn)行加密的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了Vue2.0父子組件傳遞函數(shù)的教程詳解,需要的朋友可以參考下2017-10-10
如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)詳析
埋點(diǎn)分析是網(wǎng)站分析的一種常用的數(shù)據(jù)采集方法,下面這篇文章主要給大家介紹了關(guān)于如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
解決找不到模塊“xxx.vue”或其相應(yīng)的類型聲明問題
這篇文章主要介紹了解決找不到模塊“xxx.vue”或其相應(yīng)的類型聲明問題，具有很好的參考價(jià)值，希望對大家有所幫助。2022-10-10