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

流程图

相关推荐
小气小憩5 分钟前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪6 分钟前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮6 分钟前
js符号(Symbol)
前端·javascript
恋猫de小郭34 分钟前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v1 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍1 小时前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲1 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_3 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒3 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ3 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js