vue3 provides and inject usage tips
Mainly used to communicate context, such as the communication between the parent component and the child component 2, there are two ways to solve it without using this method.
- props $emit layer by layer Disadvantage: It's too troublesome to write
- If you use too much vuex, the performance will not work
Go to the main topic
The official document only provides a way to pass values, and does not provide child components to change the value of parent components across levels, but you can just change the writing method, directly code
Code structure: Parent component-child component-son component
Parent component
<template>
<div class="text">Box {{}}</div>
<div class="box">
<Child/>
</div>
</template><script lang="ts">
import { defineComponent, ref, reactive, provide } from 'vue'
import Child from './components/'
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, // The value that val needs to be passed update // Method to update the passed value })
return {
state
}
}
})
</script>ps: Of course, you can also change the writing method. This writing method is simpler, but the semantics are weaker.
const state: any = reactive({
name: 'zlz',
age: 24,
update // Method to update state})
provide('ref2', state)child component
<template> <div class="box"> <div class="box">childComponents</div> <Son/> </div> </template>
<script>
import { defineComponent, reactive, toRaw } from 'vue'
import Son from './'
export default defineComponent({
components:{
Son
},
setup() {
}
})
</script>son component
<template>
<div class="box">
sonComponents {{}}
</div>
<button @click="handleClick">
子Components点击
</button>
</template><script>
import { inject } from 'vue'
export default {
setup() {
const ref2 = inject('ref2')
const handleClick = () => {
const key = 'age'
(key, 111) // Call the passed method to update the value of the parent component }
return {
ref2,
handleClick
}
}
}
</script>Some practical tips for vue3
v-for and v-if should not be used together (Vue2)
This optimization technique is limited to Vue2, Vue3 priorities for v-for and v-if.
Never use v-if and v-for on the same element at the same time
The reason is that v-for has higher priority than v-if, so when they are used on the same label, each render will be looped first and then conditional judgment will be made.
Note: V-if has higher priority than v-for in Vue3, so when v-for and v-if are used together, the effect is similar to the effect of V-if in Vue2.
For example, the following code is not recommended in Vue2, Vue will also give corresponding warnings
<ul>
<li v-for="user in users" v-if="">
{{ }}
</li>
</ul>We should try to move v-if to the previous level or use the computed attribute to process the data
<ul v-if="active">
<li v-for="user in users">
{{ }}
</li>
</ul>If you don't want to add an unnecessary upper container to the loop content, then you can choose to use template as its parent element, and template will not be rendered as a DOM node by the browser.
If I want to judge the content of each item in the traversal object to select the rendered data, I can use computered to filter the traversal object
// js
let usersActive = computed(()=>(user => ))
// template
<ul>
<li v-for="user in usersActive">
{{ }}
</li>
</ul>The above is personal experience. I hope you can give you a reference and I hope you can support me more.