欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3 provide與inject的使用小技巧分享

 更新時間:2022年04月18日 16:14:40   作者:原諒我不夠灑脫  
這篇文章主要介紹了vue3 provide與inject的使用小技巧,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue3 provide與inject使用技巧

主要使用來溝通上下文,比如父——子——子1——子2,父組件和子2組件間的通信,不使用這方法也能解決的方式還有兩種

  • props $emit 一層一層的傳 弊端:寫著太麻煩
  • vuex 用多了性能就不太行了

進(jìn)入正題

官方文檔上只提供了傳遞值的方式,沒有提供子組件去跨級改父級組件的值,但是可以換一種寫法就可以了,直接代碼

代碼結(jié)構(gòu): 父組件——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: 當(dāng)然也可以換一種寫法 這一種寫法要簡便一點 但是語義化更弱 

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) // 調(diào)用傳遞下來的方法去更新父組件的值
? ? }
? ? return {
? ? ? ref2,
? ? ? handleClick
? ? }
? }
}
</script>

vue3的一些實用技巧

v-for 和 v-if 不要一起使用(Vue2)

此優(yōu)化技巧僅限于Vue2,Vue3 中對 v-for 和 v-if 的優(yōu)先級做了調(diào)整,

永遠(yuǎn)不要把 v-if 和 v-for 同時用在同一個元素上

原因是 v-for 的 優(yōu)先級高于 v-if,所以當(dāng)它們使用再同一個標(biāo)簽上是,每一個渲染都會先循環(huán)再進(jìn)行條件判斷

注意: Vue3 中 v-if 優(yōu)先級高于 v-for,所以當(dāng) v-for 和 v-if 一起使用時效果類似于 Vue2 中把 v-if 上提的效果

例如下面這段代碼在 Vue2 中是不被推薦的,Vue 也會給出對應(yīng)的警告

<ul>
? <li v-for="user in users" v-if="user.active">
? ? {{ user.name }}
? </li>
</ul>

我們應(yīng)該盡量將 v-if 移動到上級 或者 使用 計算屬性來處理數(shù)據(jù)

<ul v-if="active">
? <li v-for="user in users">
? ? {{ user.name }}
? </li>
</ul>

如果你不想讓循環(huán)的內(nèi)容多出一個無需有的上級容器,那么你可以選擇使用 template 來作為其父元素,template 不會被瀏覽器渲染為 DOM 節(jié)點

如果我想要判斷遍歷對象里面每一項的內(nèi)容來選擇渲染的數(shù)據(jù)的話,可以使用 computed 來對遍歷對象進(jìn)行過濾

// js
let usersActive = computed(()=>users.filter(user => user.active))
// template
<ul>
? ? <li v-for="user in usersActive">
? ? ? {{ user.name }}
? ? </li>
</ul>

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue3中如何自定義雙向綁定

    Vue3中如何自定義雙向綁定

    這篇文章主要介紹了Vue3中如何自定義雙向綁定問題,具有很好的參考價價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue-cli是什么及創(chuàng)建vue-cli項目的方法

    vue-cli是什么及創(chuàng)建vue-cli項目的方法

    vue-cli是 vue 官方提供的、快速生成 vue 工程化項目的工具,支持創(chuàng)建vue2和vue3的項目,本文給大家詳細(xì)講解vue-cli是什么及創(chuàng)建vue-cli項目的方法,感興趣的朋友跟隨小編一起看看吧
    2023-04-04
  • vue實現(xiàn)分頁欄效果

    vue實現(xiàn)分頁欄效果

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分頁欄效果,分頁欄設(shè)計的步驟與實現(xiàn)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-06-06
  • vue3中使用router4 keepalive的問題

    vue3中使用router4 keepalive的問題

    這篇文章主要介紹了vue3中使用router4 keepalive的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 手動實現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解

    手動實現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解

    這篇文章主要給大家介紹了關(guān)于手動實現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02
  • 淺談使用mpvue開發(fā)小程序需要注意和了解的知識點

    淺談使用mpvue開發(fā)小程序需要注意和了解的知識點

    這篇文章主要介紹了淺談使用mpvue開發(fā)小程序需要注意和了解的知識點,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • vue2.0全局組件之pdf詳解

    vue2.0全局組件之pdf詳解

    這篇文章主要為大家詳細(xì)紹了vue2.0全局組件之pdf的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Vue SPA首屏加載緩慢問題解決方案

    Vue SPA首屏加載緩慢問題解決方案

    這篇文章主要介紹了Vue SPA首屏加載緩慢問題解決方案,首屏?xí)r間(First Contentful Paint),指的是瀏覽器從響應(yīng)用戶輸入網(wǎng)址地址,到首屏內(nèi)容渲染完成的時間,此時整個網(wǎng)頁不一定要全部渲染完成,但需要展示當(dāng)前視窗需要的內(nèi)容
    2023-03-03
  • Vue?router?路由安裝及使用過程

    Vue?router?路由安裝及使用過程

    vue-router 是 Vue 的一個插件庫,適用于構(gòu)建單頁面應(yīng)用,這篇文章主要介紹了Vue?router?路由安裝以及使用,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • vue3獲取當(dāng)前路由地址的兩種方法

    vue3獲取當(dāng)前路由地址的兩種方法

    近期在做ve3的項目時因為功能需要,需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10

最新評論