vue3-api之provide与inject

传值: 父组件 => 子组件 => 孙组件

// 父组件
<template>
  <div class="app">
    <h3>我是app组件(祖) --- {{ name }} {{ price }}</h3>
    <child />
  </div>
</template>

<script>
import { reactive, toRefs, provide } from "vue";
import child from "./components/child.vue";

export default {
  name: "App",
  components: { child },
  setup() {
    let car = reactive({ name: "奔驰", price: "40W" });
    // 给自己的后代组件传递数据,只要在这里执行了provide,后代子组件都可以通过inject获取数据
    // 父传子props    父传孙provide
    provide("car", car);
    return {
      ...toRefs(car),
    };
  },
};
</script>

<style>
.app {
  background-color: #ccc;
  padding: 10px;
}
</style>
<template>
  <div class="child">
    <h3>我是child组件(子) {{ msg }}{{ school }}</h3>
    <son/>
  </div>
</template>

<script>
// import { ref } from "vue";
import son from './son.vue'
export default {
  name: "child",
  components: { son },
  props: ["msg", "school","afanfan"],
  setup() {
    return {
    };
  },
};
</script>

<style>
  .child {
    background-color: skyblue;
    padding: 10px;
  }
</style>
// 孙组件
<template>
  <div class="son">
    <h3>我是son组件(孙)--- {{ car.name }}--- {{ car.price }}</h3>
  </div>
</template>

<script>
import { inject } from "vue";
export default {
  name: "son",
  setup() {
    let car = inject("car")
    return {
      car,
    };
  },
};
</script>

<style>
.son {
  background-color: orange;
  padding: 10px;
}
</style>

更多的组件传值传事件请参考:

vue3传值传事件参考

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值