provide与inject实用技巧

一、前言

    1、简介：provide与inject是Vue组件开发当中较为实用的功能。

    2、用途：主要用于vue高阶组件的开发，本文将介绍一些provide与inject的一些实用技巧。

    3、原理：

        provide用于向子组件(或子组件中的子组件，无限嵌套)提供自身的一些数据，或者将自身所有属性全部提供，但是提供的数据均为非响应式数据。

        inject用于引入父级组件所提供的数据。

二、正文

    1、首先观察Vue源码的执行顺序，我们可以看到在vue实例创建之前，我们就可以实用provide与inject功能！    

    2、实用技巧

（1）子(或更低层)组件中直接调用父组件(或更高层)的方法

下面代码为：父组件代码

<template>
    <div>
        <inject-test></inject-test>
    </div>
</template>
<script>
    import InjectTest from "./injectTest";
    export default{
        components: {InjectTest},
        name: 'ProvideTest',
        provide(){
            return {
                parentTest:this//通过provide提供自身所有属性
            }
        },
        methods: {
            printMessage(msg){
                alert(msg)
            }
        }
    }

</script>

下面为子组件代码：

<template>
    <div>
        <button  @click="handleClick">点击我调用父组件方法</button>
    </div>
</template>
<style scoped>

</style>
<script>
    export default{
        name: 'InjectTest',
        inject:['parentTest'],
        data(){
            return {}
        },
        methods: {
            //子组件调用父组件方法
            handleClick(){
                this.parentTest.printMessage("message!")
            }
        }
    }
</script>

可以看到，子组件通过inject父组件提供的provide的key直接调用父组件的方法，这点在实际开发当中是个非常实用的技巧。