vue3 provide与inject使用
原谅我不够洒脱 人气:0vue3 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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容