vue3 跨组件传参

最新推荐文章于 2025-10-19 17:13:43 发布

原创最新推荐文章于 2025-10-19 17:13:43 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue #vue.js

vue 同时被 3 个专栏收录

53 篇文章

订阅专栏

uniapp

44 篇文章

订阅专栏

40 篇文章

订阅专栏

该文章演示了在Vue中如何使用provide和inject进行父子组件间的状态传递，以及结合ref实现函数调用。在父组件中，定义了一个可变数值num和一个增加数值的方法，并通过provide传递给子组件。在孙子组件中，使用inject接收并修改数值，同时调用注入的函数来更新状态。

//父
<template>
    <div style="width: 400px;height: 400px; background: aquamarine;">
        <p>高级</p>
        <son></son>
    </div>
</template>
<script setup>
import { provide, ref } from 'vue';
import son from './son.vue'

let num = ref(0)

const fun = (val) => {
    num.value += val
}
provide('num', num)//变量
provide('chage', fun)//方法
</script>

//中级son.vue
<template>
    <div style="width: 300px;height: 300px; background: pink;">
        中级
        <grandson></grandson>
    </div>
</template>

<script setup>
import grandson from './grandson.vue'
</script>

//最低级grandson.vue
<template>
    <div style="width: 200px;height: 200px; background: bisque;">
        低级<br />
        总赞数{{ num }}
        <button @click="zan">赞+10</button>
    </div>
</template>
<script setup>
import { inject } from 'vue';
let num = inject('num')
const fun = inject('chage')
const zan = () => {
    fun(10)
}
</script>