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)文章
vue-cli是什么及創(chuàng)建vue-cli項目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化項目的工具,支持創(chuàng)建vue2和vue3的項目,本文給大家詳細(xì)講解vue-cli是什么及創(chuàng)建vue-cli項目的方法,感興趣的朋友跟隨小編一起看看吧2023-04-04手動實現(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