vue3使用依赖注入实现跨组件传值(高级版）_ide

vue3使用依赖注入实现跨组件传值(高级版）_前端_02

父组件Index.vue:

<script setup>
import { onMounted, provide, ref } from 'vue'
import Child from './Child.vue'
import { countObj } from './keys'
import './index.css'

const count = ref(0)

const handleClick = () => {
  count.value++
}

provide(countObj, { count, handleClick })

onMounted(() => {})
</script>

<template>
  <div class="m-home-wrap">
    <button @click="() => handleClick()">{{ count }}</button>
    <Child> </Child>
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

子组件Child.vue:

<script setup>
import { onMounted, ref } from 'vue'
import List from './List.vue'

onMounted(() => {})
</script>

<template>
  <List></List>
</template>

孙子组件List.vue:

<script setup>
import { onMounted, ref, inject } from 'vue'
import { countObj } from './keys'

const { count, handleClick } = inject(countObj)

onMounted(() => {})
</script>

<template>
  <div>孙子组件：{{ count }}</div>
  建议尽可能将任何对响应式状态的变更都保持在供给方组件中：
  <button @click="() => handleClick()">按钮</button>
</template>

 使用 Symbol 来作为注入名以避免潜在的冲突

key.js:

const countObj = Symbol()

export { countObj }