vue3使用依赖注入实现跨组件传值

父组件Index.vue:

javascript 复制代码
<script setup>
import { onMounted, provide, ref } from 'vue'
import Child from './Child.vue'
import './index.css'

const count = ref(0)

provide('count', count)

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

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:

javascript 复制代码
<script setup>
import { onMounted, ref } from 'vue'
import List from './List.vue'

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

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

孙子组件List.vue:

javascript 复制代码
<script setup>
import { onMounted, ref, inject } from 'vue'

const count = inject('count')

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

<template>
  <div>孙子组件:{{ count }}</div>
</template>

人工智能学习网站

https://chat.xutongbao.top

相关推荐
JSLove4 分钟前
常见 npm 报错问题
前端·npm
sunbyte4 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子5 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua9 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
markyankee1019 分钟前
Vue 计算属性和侦听器详解
vue.js
嘗_25 分钟前
暑期前端训练day5
前端
uncleTom66631 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥34 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF1 小时前
如何 测试Labview是否返回数据 ?
前端
Spider_Man1 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm