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 效果

这里我们看到从父组件向孙组件传递数据，这里也是实现了解耦。