前端面对难题：不流血的传递，用Vue3中的Provide和Inject函数实现

2023-12-12 15:05:13

前言

在Vue3中，提供了一种新的方式来实现组件之间的通信：provide/inject。这种方式可以帮助我们更加灵活和方便地传递数据，而不需要通过父组件一层一层地传递。

什么是provide和inject函数？

provide函数的作用是向子组件提供数据，而inject函数的作用是将父组件提供的数据注入到子组件中。

如何使用provide和inject函数？

1. 在父组件中使用provide函数提供数据

<template>
  <div>
    <p>父组件数据：{{ data }}</p>
    <ChildComponent />
  </div>
</template>

<script>
import { provide } from 'vue'
export default {
  setup() {
    provide('data', '父组件数据')
  }
}
</script>

2. 在子组件中使用inject函数注入数据

<template>
  <div>
    <p>子组件数据：{{ data }}</p>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const data = inject('data')
    return { data }
  }
}
</script>

使用provide和inject函数需要注意的事项

1. provide和inject函数只能在setup函数中使用

2. provide函数只能在父组件中使用，inject函数只能在子组件中使用

3. provide函数和inject函数只能传递简单数据，不能传递对象或数组

4. 如果父组件的数据发生变化，子组件的数据也会随之变化

总结

provide和inject函数是Vue3中用于组件之间通信的两种新函数。它们可以帮助我们更加灵活和方便地传递数据，而不需要通过父组件一层一层地传递。

案例

我们可以使用provide和inject函数来实现一个简单的计数器组件。

<!-- 父组件 -->
<template>
  <div>
    <p>父组件计数：{{ count }}</p>
    <ChildComponent />
  </div>
</template>

<script>
import { provide } from 'vue'
export default {
  setup() {
    const count = ref(0)
    provide('count', count)
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件计数：{{ count }}</p>
    <button @click="incrementCount">+</button>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const count = inject('count')
    const incrementCount = () => { count.value++ }
    return { count, incrementCount }
  }
}
</script>