应用场景

prop传值是平常Vue父子组件之间主要传值的方式，并且这是响应式的。但是，如果你有个应用嵌套了多层组件，然后多个子组件需要用到父组件的某个值，这个时候通过provide→inject的方式是比较方便的。

//父组件
<template>
    <div>
        <componentA></componentA>
    </div>
</template>

<script>
    // @ is an alias to /src
    import componentA from '../components/componentA'
    export default {
        name: 'home',
        data() {
            return {
                name: 'wcx'
            }
        },
        provide() {
            return {
                name: name
            }
        },
        components: {
            componentA,
        }
    }
</script>

//子组件
<template>
    <div>
        componentA<input type="text" value="name">
        <componentB></componentB>
    </div>
</template>
<script>
    import componentB from './componentB';
export default {
    name: 'componentA',
    inject: ['name'],
    components: {
        componentB
    }
}
</script>
<style lang="">
    
</style>

// 孙子组件
<template>
    <div>
        componentB{{name}}
        <input type="text" value="name">
    </div>
</template>
<script>
export default {
    name: 'componentB',
    inject: ['name']
}
</script>
<style lang="">
    
</style>

结果图：

image

总结

prop：

优点： 响应式
缺点： 递归传值比较麻烦

provide→inject：

优点： 递归传值比较容易
缺点： 非响应式

【完】