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>