vue中 provide和inject
provide和inject将父组件中的数据传递给下一级,inject在需要接受父组件数据的子组件或者孙组件等下级组件注入数据。
他俩是搭配着使用的。
父组件中provide向下级传送数据
import Child from './child.vue' export default { components: { Child }, provide() { return { send: this.val, value: this.data } }, data() { return { val: '父组件的data', data: '传递父组件数据' } }, }
在下级组件中接收父组件中的数据
<template> <div> 子组件{{data}}--{{send}} <Sun /> </div> </template> <script> import Sun from './sunChild' export default { components: { Sun }, inject: ['send'], data() { return { data: '子组件data' } } } </script>
<template> <div> 孙子组件--{{aa}} </div> </template> <script> export default { inject: ['value'], data() { return { aa: this.value } }, mounted() { this.aa = '22' }, } </script>