vue3中provide和inject的使用
1.provide 和 inject 的講解
provide和inject可以實現嵌套組件之間進行傳遞數據。
這兩個函數都是在setup函數中使用的。
父級組件使用provide向下進行傳遞數據;
子級組件使用inject來獲取上級組件傳遞過來的數據;
需要註意的是:
1==>provide隻能夠向下進行傳遞數據
2==>在使用provide和inject的時候需從vue中引入
2.provide 和 inject 的使用
我們將創建2個組件
兒子組件ErZi.vue
孫子組件SunZI.vue
我們將在父級組件中向其子代傳遞數據;
那麼兒子、孫子組件都將會接受到;
並且在視圖上顯示出來
3.父組件
<template> <erzi-com></erzi-com> </template> <script lang="ts"> import ErZi from "../components/ErZi.vue" import {provide, ref} from "vue" export default { name:"About", components:{ 'erzi-com':ErZi }, setup(){ let giveSunziData=ref({ with:100, height:50, bg:'pink' }) // 第一個參數是是共享數據的名稱(giveSunzi) // 第二個參數是共享的數據(giveSunziData) provide('giveSunzi',giveSunziData) } } </script>
父組件向其子代組件傳遞瞭一個對象
provide是在setUp這個組合APi中使用的
provide的使用方式:
provide(’共享數據名稱’,共享值)
共享值可以是字符串、數字、對象、數組子組件在進行接收到的時候;
let xxx=inject(‘共享數據名稱’);
4.兒子組件
<template> <div> <h2>兒子組件</h2> <div>得到的值:{{getFaytherData}}</div> </div> <hr/> <sun-con></sun-con> </template> <script lang="ts"> import { defineComponent, inject } from 'vue'; import SunZI from "./SunZI.vue" export default defineComponent({ name: 'ErZi', components:{ 'sun-con':SunZI }, setup(){ let getFaytherData=inject('giveSunzi'); return { getFaytherData } } }); </script>
5.孫子組件
<template> <div> <h2>孫子組件</h2> <div>得到的值{{getYeYeData}}</div> </div> </template> <script lang="ts"> import { defineComponent,inject } from 'vue'; export default defineComponent({ setup(){ let getYeYeData=inject('giveSunzi'); return { getYeYeData } } }); </script>
6.效果圖
7.父組件可以傳遞多個rovide嗎?
有些時候,我們的父組件可能需要傳遞多個rovide;
因為我們想讓數據分開。
此時就需要傳遞多個rovide。
經過實踐,父組件是可以傳遞多個rovide的!!!!
這是沒有沒問題的;但是個人並不推薦這樣處理
我們可以在傳遞的時候將多個數據進行一次組裝;
組裝好瞭之後再進行傳遞
8.rovide和inject的引用場景
當父組件有很多數據需要分發給其子代組件的時候,
就可以使用provide和inject。
到此這篇關於vue3中provide和inject的使用的文章就介紹到這瞭,更多相關vue provide和inject使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3中 provide 和 inject 用法及原理
- Vue3全局組件通信之provide / inject詳解
- Vue3學習筆記之依賴註入Provide/Inject
- Vue 中 provide和inject的使用
- vue3 非父子組件通信詳解