provide / inject 的简单使用

最新推荐文章于 2024-09-10 23:27:03 发布

海带先森

最新推荐文章于 2024-09-10 23:27:03 发布

阅读量170

点赞数

分类专栏：前端vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43106691/article/details/107212892

版权

前端vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

provide / inject

祖先组件向其所有后代组件注入依赖

组件

<template>
  <div>
    oindex
    <oIndex2></oIndex2>
  </div>
</template>

<script>
import oIndex2 from "./oIndex2";
export default {
  components: {
    oIndex2
  },
  provide() {
    return {
      list: this.list
    };
  },
  data() {
    return {
      list: [{ id: 1, name: "刘德华" }]
    };
  }
};
</script>

<style>
</style>

子组件

<template>
  <div>
    oIndex2
    <oIndex3></oIndex3>
  </div>
</template>

<script>
import oIndex3 from "./oIndex3";
export default {
  components: {
    oIndex3
  }
};
</script>

<style>
</style>

孙组件

<template>
  <div>oIndex3</div>
</template>

<script>
export default {
  inject: ["list"],
  mounted() {
    console.log("tag", this.list);
  }
};
</script>

<style>
</style>

总结:达到数据的简单穿透效果