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

2023-02-20,,

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 -

VUE004. provide与inject的使用(祖先组件隔多层传静态值给子孙组件)的相关教程结束。

《VUE004. provide与inject的使用(祖先组件隔多层传静态值给子孙组件).doc》

下载本文的Word格式文档,以方便收藏与打印。