爷孙组件数据传递 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>

流程图

相关推荐
gnip3 分钟前
项目开发流程之技术调用流程
前端·javascript
答案—answer4 分钟前
three.js编辑器2.0版本
javascript·three.js·three.js 编辑器·three.js性能优化·three.js模型编辑·three.js 粒子特效·three.js加载模型
转转技术团队17 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
南囝coding18 分钟前
这几个 Vibe Coding 经验,真的建议学!
前端·后端
gnip32 分钟前
SSE技术介绍
前端·javascript
yinke小琪1 小时前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿1 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux1 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆1 小时前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp