VUE3祖孙传参的问题

Question

当孙组件触发了"<button @click="a.b('b')">改变爷爷的值"这个按钮的事件修改了第一层APP.vue的值但是自己身上的值并没有发生同步的改变应该要怎么解决啊

这个是父组件最顶层的APP.vue的代码

<template>
    <div>
        <parent :a="a" :b="change"/>
        <h3>爷爷的值{{ a }}</h3>
    </div>
</template>
<script setup lang="ts">
    import parent from './mittandmodel/parent.vue';
    import {ref} from 'vue'
    let a = ref("123")
    function change(value:string){
        a.value = value
    }
</script>

这个是子组件第二层的parent.vue的代码

<template>
    <div>
    <h2>mitt测试</h2>
    <child1 :a="$attrs"/>
    <child2/>
    <!-- update:modelValuez只是事件命可以任意写其他名字 -->
    <!-- <input :value="info" @input="info=(<HTMLInputElement>$event.target).value"> -->
    <!-- <model :modelValue="info" @update:modelValue="info = $event"/> -->
    <model v-model="info" v-model:ces="min"/>
    </div>
</template>
<script setup lang="ts">
import child1 from './child1.vue';
import child2 from './child2.vue';
import model from './model.vue';
import {ref} from 'vue'
let info = ref('zhangsan')
let min = ref('21312')
</script>

这个是孙组件第三层的child1.vue的代码

<template>
    <h1>孩子一</h1>
    <h2>爷爷辈的数据{{ a.a }}</h2>
    <button @click="emitter.emit('sendinfo',gift)">发送</button>
    <button @click="a.b('b')">改变爷爷的值</button>
</template>
<script setup lang="ts">
    import {ref} from 'vue';
    import emitter from '@/utils/emitter';
    let gift = ref('玩具一')
    defineProps(['a'])
</script>

Answer 1

多级传递参数，你可以使用provide和inject呀，比你这简单。
可以参考一下这个：

vue3组件间的通信，通过props，emit，provide和inject把数据传递N个层级，expose和ref实现父组件调用子组件方法_vue3 父子组件调用可以几层-CSDN博客 文章浏览阅读844次，点赞11次，收藏10次。template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件，请把用户输入的值msg传出去//也可以不传参数.itxst{_vue3 父子组件调用可以几层 https://blog.csdn.net/shanghai597/article/details/130885613?spm=1001.2014.3001.5502