vue3.0组件传值之爷子孙共享数据的实现

App.vue(爷)

<template>
    <div class="countainer" style="display: flex">
        <div style="flex: 1">
            <div>爷传给子又传给孙的共享值： {{ money }}</div>
        </div>
    </div>
</template>
<script>
import { onBeforeMount, onMounted, reactive, toRef, toRefs, ref, provide } from 'vue'
import son from './components/son.vue'
export default {
    name: 'App',
    components: {
        son,
    },
    /**
     * 模板中需要的数据和函数，都从setuo里返回
     */
    setup() {

        // 有关组件间的传值，只需要记住一点，谁创建谁修改，非创建者就不能胡乱修改，非创建者需要用通知的方式通知创建者修改

        // 父子孙三代共享数据
        let money = ref(200);

        // 修改数据的方法
        const changeMoney = (newValue) => {
            money.value = newValue;
        }

        // 设置共享数据
        provide('money', money);

        // 设置修改共享数据的方式
        provide('changeMoney', changeMoney);

        return { updataSonData, money }; // 这里返回的是一个对象
    },
}
</script>

son.vue

<template>
    <div class="son">子组件</div>
    <div>爷组件共享给子组件的值： {{ money }}</div>
    <button @click="fn1">点我子组件修改爷组件共享的值</button>
    <grand-son />
</template>
<script>
import grandSon from './grandSon.vue'
import { inject } from 'vue'
export default {
    name: 'son',
    components: {
        grandSon,
    },
    setup() {
        // 接收provide共享数据
        const money = inject('money');

        // 接收provide修改数据的方法
        const changeMoney = inject('changeMoney');
        const fn1 = () => {
            changeMoney(600);
        }

        return { changeAppData, money, fn1 }
    }
}
</script>

grandSon.vue

<template>
    <div class="grandSon">孙组件获得爷组件共享的数据： {{ money }}</div>
</template>
<script>
import { inject } from 'vue'
export default {
    name: 'grandSon',
    setup(props) {
        const money = inject('money');

        return { money }
    }
}
</script>