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

相关推荐
dasseinzumtode2 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰2 小时前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss2 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship2 小时前
网页截图API-Npm工具包分享
前端
Jedi Hongbin2 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix2 小时前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法
光影少年2 小时前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
超人不会飛2 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
じòぴé南冸じょうげん2 小时前
微信小程序如何进行分包处理?
前端·小程序
Jolyne_2 小时前
Table自定义单元格渲染分享
前端