vue3 provide與inject的使用小技巧分享
更新時間：2022年04月18日 16:14:40 作者：原諒我不夠灑脫
這篇文章主要介紹了vue3 provide與inject的使用小技巧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3 provide與inject使用技巧
主要使用來溝通上下文，比如父——子——子1——子2，父組件和子2組件間的通信，不使用這方法也能解決的方式還有兩種
- props $emit 一層一層的傳 弊端：寫著太麻煩
- vuex 用多了性能就不太行了
進入正題
官方文檔上只提供了傳遞值的方式，沒有提供子組件去跨級改父級組件的值，但是可以換一種寫法就可以了，直接代碼
代碼結構： 父組件——child組件——son組件
父組件
<template>
? <div class="text">盒子 {{state.name}}</div>
? <div class="box">
? ?<Child/>
? </div>
</template><script lang="ts">
import { defineComponent, ref, reactive, provide } from 'vue'
import Child from './components/child.vue'
export default defineComponent({
? components:{
? ? Child
? },
? setup() {
? ? const state: any = reactive({
? ? ? name: 'zlz',
? ? ? age: 24
? ? })
? ? const update = (key: string, val: any): void => {
? ? ? state[key] = val
? ? }
? ? provide('ref2', {
? ? ? val: state, ?// val需要傳遞的值
? ? ? update // 更新傳遞的值的方法
? ? })
? ? return {
? ? ? state
? ? }
? }
})
</script>ps: 當然也可以換一種寫法 這一種寫法要簡便一點 但是語義化更弱
const state: any = reactive({
? name: 'zlz',
? age: 24,
? update // 更新state的方法
})
provide('ref2', state)child組件
<template> ? <div class="box"> ? ? <div class="box">child組件</div> ? ? <Son/> ? </div> </template>
<script>
import { defineComponent, reactive, toRaw } from 'vue'
import Son from './son.vue'
export default defineComponent({
? components:{
? ? Son
? },
? setup() {
? }
})
</script>son組件
<template>
? <div class="box">
? ? son組件 {{ref2.val.age}}
? </div>
? <button @click="handleClick">
? ? 子組件點擊
? </button>
</template><script>
import { inject } from 'vue'
export default {
? setup() {
? ? const ref2 = inject('ref2')
? ? const handleClick = () => {
? ? ? const key = 'age'
? ? ? ref2.update(key, 111) // 調用傳遞下來的方法去更新父組件的值
? ? }
? ? return {
? ? ? ref2,
? ? ? handleClick
? ? }
? }
}
</script>vue3的一些實用技巧
v-for 和 v-if 不要一起使用（Vue2）
此優(yōu)化技巧僅限于Vue2，Vue3 中對 v-for 和 v-if 的優(yōu)先級做了調整，
永遠不要把 v-if 和 v-for 同時用在同一個元素上
原因是 v-for 的 優(yōu)先級高于 v-if，所以當它們使用再同一個標簽上是，每一個渲染都會先循環(huán)再進行條件判斷
注意： Vue3 中 v-if 優(yōu)先級高于 v-for，所以當 v-for 和 v-if 一起使用時效果類似于 Vue2 中把 v-if 上提的效果
例如下面這段代碼在 Vue2 中是不被推薦的，Vue 也會給出對應的警告
<ul>
? <li v-for="user in users" v-if="user.active">
? ? {{ user.name }}
? </li>
</ul>我們應該盡量將 v-if 移動到上級 或者 使用 計算屬性來處理數(shù)據
<ul v-if="active">
? <li v-for="user in users">
? ? {{ user.name }}
? </li>
</ul>如果你不想讓循環(huán)的內容多出一個無需有的上級容器，那么你可以選擇使用 template 來作為其父元素，template 不會被瀏覽器渲染為 DOM 節(jié)點
如果我想要判斷遍歷對象里面每一項的內容來選擇渲染的數(shù)據的話，可以使用 computed 來對遍歷對象進行過濾
// js
let usersActive = computed(()=>users.filter(user => user.active))
// template
<ul>
? ? <li v-for="user in usersActive">
? ? ? {{ user.name }}
? ? </li>
</ul>以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue數(shù)據雙向綁定是通過數(shù)據劫持結合發(fā)布者-訂閱者模式的方式來實現(xiàn)的.本文重點給大家介紹Vue數(shù)據雙向綁定原理及簡單實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
這篇文章主要介紹了Vue中圖片Src使用變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了Vue 中可以定義組件模版的幾種方式以及他們之間的一些差別，需要的朋友可以參考下2019-08-08
圖表在我們的項目中可以幫我們很明確的看到我們想要看到的數(shù)據，本文將主要介紹Echart圖表在項目中前后端使用的詳細教程，感興趣的同學可以學習一下2021-11-11
本文主要介紹了vite構建項目并支持微前端，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
webpack提供的反向代理服務器在開發(fā)階段非常方便，幾行簡單的代碼配置就可以使用反向代理功能，包括路徑重寫、cookie處理等。這篇文章主要介紹了vue webpack重寫cookie路徑,需要的朋友可以參考下2019-07-07
Vue結合openlayers按照經緯度坐標實現(xiàn)錨地標記及繪制多邊形區(qū)域
OpenLayers是一個用于開發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個開源的項目，其設計之意是為互聯(lián)網客戶端提供強大的地圖展示功能，包括地圖數(shù)據顯示與相關操作，并具有靈活的擴展機制2022-09-09
文章介紹了Vue單頁應用中出現(xiàn)404錯誤的原因,以及如何通過配置Nginx和使用Vue Router的hash模式來解決這個問題,同時,文章還簡要解釋了單頁應用的概念及其優(yōu)點和缺點,并討論了Router的實現(xiàn)方式2024-12-12
這篇文章主要介紹了vue2中如何使用swiper@5.4.5問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
iview form清除校驗狀態(tài)的實現(xiàn)
這篇文章主要介紹了iview form清除校驗狀態(tài)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09