vue3 provide inject,vue provide inject好处和缺点
本文主要介绍了使用vue3provide和inject的技巧，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
vue3提供并注入使用技巧，直奔主题。父组件子组件子组件vue3 v-for和v-if的一些实用技巧不要一起用(Vue2)
vue3 provide与inject使用技巧
它主要用于传递上下文，例如父组件——子组件3354子组件13354子组件2、父组件和子组件2之间的通信。没有这个方法有两种方法可以解决这个问题。
道具$层层发射的缺点：写起来太麻烦。vuex用多了性能就不好了。
进入正题
官方文档只提供了传递值的方式，没有提供子组件跨级改变父组件的值，但是可以用另一种方式写，直接代码。
代码：父组件——子组件——子组件
父组件
模板
class= text box { { state . name } }/div
div class=box
孩子/
/div
/模板
脚本语言
从“vue”导入{ defineComponent，ref，reactive，provide }
从导入子级。/components/child.vue
导出默认定义组件({
组件：{
儿童
},
setup() {
常量状态：any=reactive({
名称： zlz ，
年龄：24岁
})
const update=(key: string，val: any): void={
状态[键]=值
}
提供( ref2 ，{
Val: state，//val要传递的值
Update //更新传递值的方法
})
返回{
状态
}
}
})
/脚本
Ps:当然也可以换一种写法，更简单但语义少一点。
常量状态：any=reactive({
名称： zlz ，
年龄：24，
Update //更新状态的方法
})
提供(“ref2”，状态)
child组件
模板
div class=box
Class= box 子组件/div
儿子/
/div
/模板
脚本
从“vue”导入{ defineComponent，reactive，toRaw }
从导入儿子。/son.vue
导出默认定义组件({
组件：{
儿子
},
setup() {
}
})
/脚本
son组件
模板
div class=box
组件{{ref2.val.age}}
/div
button @click=handleClick
子组件单击
/按钮
/模板
脚本
从“vue”导入{ inject }
导出默认值{
setup() {
const ref2=inject(ref2 )
const handleClick=()={
const key=age
Ref2.update(key，111) //调用传递的方法更新父组件的值。
}
返回{
ref2，
手柄点击
}
}
}
/脚本
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会给出相应的警告。
保险商实验所
li v-for=用户中的用户 v-if=user.active
{{用户名}}
/李
/ul
我们应该尽力将v-if移到更高的级别，或者使用计算属性来处理数据。
ul v-if=active
li v-for=用户中的用户
{{用户名}}
/李
/ul
如果不希望循环内容有不必要的上级容器，那么可以选择使用template作为其父元素。浏览器不会将模板呈现为DOM节点。
如果我想判断遍历对象中每一项的内容来选择渲染数据，我可以使用computed来过滤遍历对象。
//js
let users active=computed(()=users . filter(user=user . active))
//模板
保险商实验所
Li v-for= users active中的用户
{{用户名}}
/李
/ul
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。