爷孙组件数据传递 provide/inject

创建三个组件GrandpaA.vue (爷) => FatherA.vue (父) => SonA (儿)

在每个组件中套用下一个组件

爷组件

复制代码
<template>
  <div class="box">
    GrandpaA 爷爷
    <button @click="change">修改数据</button>
    <FatherA></FatherA>
  </div>
</template>

<script>
import FatherA from "@/components/FatherA.vue";
export default {
  provide() {
    return {
      color: this.color,
      userInfo: this.userInfo,
    };
  },
  data() {
    return {
      color: "pink", //简单数据类型(不是响应性)
      userInfo: {
        name: "张三",  //复杂数据类型(响应性)
        age: 18,
      },
    };
  },
  methods:{
    change(){
      // 点击修改数据 
      // this.color = "red";    //没有响应性
      this.userInfo.name = "李四";    //有响应性
    }
  },
  components: {
    FatherA,
  }
}
</script>

孙祖件

复制代码
<template>
  <div class="box">
    <p>SonA 儿子</p>
    {{ color }}
    {{ userInfo.name }}
    {{ userInfo.age }}
  </div>
</template>

<script>
export default {
  inject: ["color", "userInfo"],
};
</script>

流程图

相关推荐
M1A16 分钟前
全栈开发必备:Windows安装VS Code全流程
前端·后端·全栈
蜗牛快跑1236 分钟前
github 源码阅读神器 deepwiki,自动生成源码架构图和知识库
前端·后端
嘻嘻嘻嘻嘻嘻ys8 分钟前
《Vue 3.4响应式超级工厂:Script Setup工程化实战与性能跃迁》
前端·后端
장숙혜11 分钟前
ElementUi的tabs样式太难修改,自定义tabs标签页
前端·javascript
用户214118326360212 分钟前
dify案例分享-魔搭+Dify王炸组合!10分钟搭建你的专属 生活小助理
前端
工呈士12 分钟前
HTML与安全性:XSS、防御与最佳实践
前端·html·xss
WEI_Gaot15 分钟前
zustand 基础和进阶
前端·react.js
程序员Qian18 分钟前
从开发天气MCP服务入门什么是MCP
前端
用户20311966009619 分钟前
sheet的基本用法
前端
火星思想25 分钟前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计