https://cn.vuejs.org/v2/api/#provide-inject
https://blog.csdn.net/Min_Fox/article/details/123428325

• 父級頁面（src/views/user/member/index.vue）

<template>
    <div class="user">
        <div class="">
            <div>會員用戶</div>
        </div>
        <child></child>
    </div>
</template>

<script>
    import child from "@/components/child";
    export default {
        components: {
            child,
        },
        name: 'Member',
        data() {
            return {
                name: 'hszz',
                obj: {
                    name: 'hszz'
                },
            }
        },

        provide() {
            return {
                name: this.name,                // 父級傳遞的非響應式數(shù)據(jù)
                xxName: () => this.name,        // 父級傳遞的響應式數(shù)據(jù)方法1-通過工廠函數(shù)
                obj: this.obj,                  // 父級傳遞的響應式數(shù)據(jù)方法2-傳遞對象
                changeData: this.changeData,    // 暴露給子組件的方法，子組件可通過此方法傳值給父級
            }
        },

        methods: {
            changeData(value) {
                this.name = value
                this.obj.name = value
            }
        },
    }
</script>

• 子組件（src/components/child/index.vue）

<template>
    <div>
        <div>子組件</div>

        <div>父級的非響應數(shù)據(jù)：{{ name }}</div>
        <div>父級的響應數(shù)據(jù)1.1：{{ cName }}</div>
        <div>父級的響應數(shù)據(jù)1.2：{{ xxName() }}</div>
        <div>父級的響應數(shù)據(jù)2.1：{{ obj.name }}</div>


        <el-input v-model="childData"></el-input>
        <el-button type="primary" @click="childChangeData">
            點擊把輸入框數(shù)據(jù)傳遞給父級，修改父級數(shù)據(jù)
        </el-button>
    </div>
</template>

<script>
export default {
    name: "child",
    data() {
        return {
            childData: "",
        };
    },
    inject: ['name', 'changeData', 'obj', 'xxName'],

    methods: {
        childChangeData() {
            this.changeData(this.childData)
        }
    },

    computed: {
        cName() {
            return this.xxName()
        }
    },
};
</script>

image.png

image.png