祖孙组件传值通过（provide+inject）

最新推荐文章于 2024-06-06 15:24:33 发布

陈橙橙成大事

最新推荐文章于 2024-06-06 15:24:33 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

11 篇文章

订阅专栏

本文探讨了在Vue中如何通过`provide/inject`进行父子组件间的通信，并展示了子组件和孙组件如何直接修改父组件传递的数据，展示了双向数据绑定在组件间的影响和潜在问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父级：

provide:function () {
      return {
          job:this.job
      }  
    },

<div>职业：{{job.type}}</div>

子级：

//注入父组件设置的依赖数据
inject:['job'],

<button @click="job.type='java开发工程师'">修改</button>

孙级组件：

//注入父组件设置的依赖数据
inject:['job'],

<button @click="job.type='UI设计工程师'">修改</button>