vue中的inject和provide

在Vue中，provide 和 inject 是用来实现祖先组件向子孙组件传递数据的一种高级组件通信方式。provide 可以在祖先组件中定义数据，而 inject 可以在子孙组件中接收这些数据。这种传递方式不受组件层级限制，非常适合于跨多层级的组件通信。

用法案例

父级组件

<template>
  <div>
    <div>我是父级组件</div>
    <Child/>
  </div>
</template>

<script>
import Child from './child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
    message:'父组件信息'
    }
  },
  provide() {
    return { $_parent: this };
  },
  methods:{
     getMessage(){
       alert('message')
      }
  }
}
</script>

<style></style>

child组件

<template>
  <div>
    <button @click="getInfo">获取父组件信息</div>
  </div>
</template>

<script>
export default {
  name: 'child',
  data() {
    return {
    }
  },
  inject: ['$_parent'],
   methods:{
     getInfo(){
     console.log(this.$_parent.message)
      this.$_parent.getMessage()
     }
  }
}
</script>

<style></style>

当然你也可以在App.vue中定义provide，这样provide中的方法和属性在其他页面中都可以访问