19~vue祖先组件跨级传值(Provide和Inject)给后代组件

俗世凡人行

已于 2023-09-12 00:07:50 修改

阅读量203

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2023-09-12 00:07:29 首次发布

本文链接：https://blog.csdn.net/weixin_41887155/article/details/132819365

版权

vue3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了Vue组件如何通过`provide`和`inject`实现跨级传值，包括直接传固定值、组件属性传递以及响应式数据的处理。重点讲解了这两个选项的工作原理和应用场景。

摘要由CSDN通过智能技术生成

vue组件之间跨级传值

无论组件层次结构**有多深**, 祖先组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分: 祖先组件有一个provide选项来提供数据, 后代组件有一个inject选项来开始使用这些数据。

跨级通信第一步: 祖先组件通过provide配置选项来提供数据
跨级通信第二步: 后代组件通过inject配置选项来接收数据

传固定的值

祖先组件的操作,提供数据

provide:{ // 把`先传一个具体的值, 测试看看`这个信息传递给后代组件
    message:"先传一个具体的值, 测试看看"
    // message:this.msg  访问组件实例的属性, 这样写是错误的,不生效
  },

后代组件的操作, 接收数据

inject:['message']

传组件里面的属性

需要转化为返回对象的函数, 才能进行传递

祖先组件的操作,提供数据

data () {
    return {   
      // 要把msg传递给孙组件  HelloWorld.vue
      msg:'祖先组件信息, 要跨一级直接传递给后代组件',      
    }
  },  
provide(){
    return {
      // 把组件的属性msg传递给后代组件
      message:this.msg     
    }
  },

后代组件的操作, 接收数据

inject:['message']

响应式跨级传递数据

provide和inject并不是响应式的, 是一个单项数据流(就是祖先组件改变的数据, 后代组件不改变), 但是我们可以通过传递一个 ref property 或 reactive对象给provide来改变这种行为,变成响应式的。

响应式对象的方式

祖先组件的操作,提供数据

data () {
    return {        
      obj:{
        msg:'祖先组件信息, 要跨一级直接传递给后代组件'
      }   
    }
  }, 
provide(){
    return {    
      obj:this.obj // 响应式对象的方式     
    }
  },

后代组件的操作, 接收数据

// 模版展示
<p>祖先组件跨级传过来的值:  {{ obj.msg }} </p>
// 接收对象
inject:['obj']

函数返回响应式数据

祖先组件的操作,提供数据

<script>
import Content from './components/Content.vue'
export default {
  data () {
    return {   
      // 要把msg传递给孙组件  HelloWorld.vue
      msg:'祖先组件信息, 要跨一级直接传递给后代组件'      
    }
  },  
  components:{
    Content, 
  },
  
  provide(){
    return {
      message:()=>this.msg // 函数返回响应式数据
    }
  },
  methods: {
  },
  computed: {
  },
  watch: {
  }
}
</script>

<template>
  <div>     
    <p>祖先信息:  {{ msg }}</p>
    <Content> </Content> 
    <button @click="msg='我是祖先组件msg改变的结果'">改变msg</button>
  </div>
</template>
<style></style>

后代组件的操作, 接收数据

<template>
  <h2>{{ msg }}</h2>
  <p>祖先组件跨级传过来的值:  {{ newMsg }} </p>
</template>
<script>
export default{
  data()
  {
    return {
      msg:'我是后代组件的数据展示'
    }
  },
  /**
   * 跨级通信第二步: 
   * 后代组件通过`inject`配置选项来`接收`数据
   * 
   * inject接收到的函数不要直接显示在模板中, 
   * 转化为计算属性后展示, 后面维护起来更轻松
   */
  inject:['message'],
  computed:{
    newMsg(){
      return this.message()
    }
  }
}
</script>