vue 的provide 和 inject

1.功能說明

在開發過程中，在子組件中如何獲取父組件或者祖父級的數據。這個我們之前的做法是在子組件中找到父組件實例，然後使用父組件的數據。這樣其實不是很自然。

在vue 中提供了 provide 和 inject 的功能，這個功能的作用是，在父組件中提供某些數據，在子或孫中獲取這些數據。

2. 示例

2.1 編輯父頁面

<template>
    <div>
        <input type="text" v-model="config.name">
        <Child></Child>
    </div>
</template>

<script>
import Child from "@/views/modules/demo/child";
export default {
    name: "provide",
    components: {Child},
    provide(){
        return {
            config:this.config
        }
    },
    data(){
        return {
            config:{
                name:""
            }
        }
    }
}
</script>

這裏我們可以看到我們增加了一個 provide ，這個provide 提供的是一個 config 對象。

2.2 編輯子組件

<template>
<div>
    <sun-component></sun-component>
</div>
</template>

<script>

import SunComponent from "@/views/modules/demo/sun";
export default {
    name: "child",
    components: {SunComponent}
}
</script>

這個組件什麼都不做，只是引用孫組件。

2.3 編輯孫組件

<template>
    <div>
        {{config.name}}
    </div>
</template>

<script>
export default {
    name: "sunComponent",
	//這裏我們注入了一個config對象
    inject:["config"]
}
</script>

2.4 效果

這裏我們看到從父組件向孫組件傳遞數據，這裏也是實現瞭解耦。