VUE004. provide与inject的使用（祖先组件隔多层传静态值给子孙组件）

provide和inject可以通过祖先组件隔三层四层甚至隔着九层妖塔传值给子孙组件。

需要注意的是这样的传值方式是非响应式的，需要结合自身的应用场景，比如将上传的限制条件通过父组件传值给子组件的子组件，这样就不用写两个props了，

只需要在父组件中写下provide传入：

export default {
    data() {
        return {
            dataSource: ['jpg', 'jpeg', 'png', 'gif']
        }
    }
    provide() {
        return {
            fileType: this.dataSource
        }
    },
}

孙组件中写inject方法接收：

<template>
    <div>
        {{ fileType[0] }}    // jpg
    </div>
</template>

export default {
    inject: ['fileType']
}

---

如果需要传可变的响应式数据请用props

- END -