vue3 provide与inject的使用小技巧分享

目录

• vue3 provide与inject使用技巧
• 进入正题
• 父组件
• child组件
• son组件
• vue3的一些实用技巧
• v-for 和 v-if 不要一起使用（Vue2）

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。