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