vue3 provide与inject的使用小技巧分享
时间：2022-10-28 09:53:48|栏目：vue|点击： 次
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）
此优化技巧仅限于Vue2，Vue3 中对 v-for 和 v-if 的优先级做了调整，
永远不要把 v-if 和 v-for 同时用在同一个元素上
原因是 v-for 的 优先级高于 v-if，所以当它们使用再同一个标签上是，每一个渲染都会先循环再进行条件判断
注意： Vue3 中 v-if 优先级高于 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 移动到上级 或者 使用 计算属性来处理数据
<ul v-if="active">
<li v-for="user in users">
{{ user.name }}
</li>
</ul>
如果你不想让循环的内容多出一个无需有的上级容器，那么你可以选择使用 template 来作为其父元素，template 不会被浏览器渲染为 DOM 节点
如果我想要判断遍历对象里面每一项的内容来选择渲染的数据的话，可以使用 computed 来对遍历对象进行过滤
// js
let usersActive = computed(()=>users.filter(user => user.active))
// template
<ul>
<li v-for="user in usersActive">
{{ user.name }}
</li>
</ul>
栏 目：vue
下一篇：vue如何监听浏览器主动刷新
本文标题：vue3 provide与inject的使用小技巧分享
本文地址：http://www.codeinn.net/misctech/217529.html
