『VUE』35. 依赖注入,跨组件爷爷-父亲-儿子组件的数据传递（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

组件多重关系传递数据

比如说现在有爷爷-父亲-儿子三代,如何把爷爷的数据传递给儿子呢?

我们之前的思路就是通过props 爷爷传给父亲,父亲传给儿子,稍显麻烦,万一有好几层就绷不住了~

• App.vue

<template>
  <h3>爷爷</h3>
  <ComponentA :message="message" />
</template>

<script>
import ComponentA from "./components/ComponentA.vue";
export default {
  data() {
    return {
      message: "爷爷的数据",
    };
  },
  components: {
    ComponentA,
  },
};
</script>

• ComponentA.vue

<template>
  <h3>父亲</h3>
  <p>爷爷给父亲:{{ message }}</p>
  <ComponentB :message="message" />
</template>

<script>
import ComponentB from "./ComponentB.vue";
export default {
  components: {
    ComponentB,
  },
  props: {
    message: {
    },
  },
};
</script>

• ComponentB.vue

<template>
  <h3>儿子</h3>
  <p>父亲给儿子:{{ message }}</p>
</template>

<script>
export default {
  props: {
    message: {},
  },
};
</script>

---

进阶:采用provide和inject跨级传递数据

将要传递的数据放在provide

  provide() {
    return {
      message: this.message,
    };
  },

接受时使用inject接受

  inject: ["message"],

-App.vue

<template>
  <h3>爷爷</h3>
  <ComponentA />
</template>

<script>
import ComponentA from "./components/ComponentA.vue";
export default {
  data() {
    return {
      message: "爷爷的数据",
    };
  },
  provide() {
    return {
      message: this.message,
    };
  },
  components: {
    ComponentA,
  },
};
</script>

• ComponentA.vue

<template>
  <h3>父亲</h3>
  <p>爷爷给父亲:{{ message }}</p>
  <ComponentB />
</template>

<script>
import ComponentB from "./ComponentB.vue";
export default {
  components: {
    ComponentB,
  },
  inject: ["message"],
  data() {
    return {
      sonMessage: this.message,
    };
  },
};
</script>

• ComponentB.vue

<template>
  <h3>儿子</h3>
  <p>父亲给儿子message:{{ message }}</p>
  <p>父亲给儿子sonMessage:{{ sonMessage }}</p>
</template>

<script>
export default {
  inject: ["message"],
  data() {
    return {
      sonMessage: this.message,
    };
  },
};
</script>

---

注意事项与全局变量的定义

注意通过provide inject只能是从上到下传递,不能逆向儿子传给爷爷或者父亲.

可以在main.js中添加全局的数据

// import './assets/main.css'

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.provide("globalData", "我是全局数据");

app.mount("#app");

在儿子 父亲 爷爷中可以调用

<template>
  <h3>儿子</h3>
  <p>父亲给儿子message:{{ message }}</p>
  <p>父亲给儿子sonMessage:{{ sonMessage }}</p>
  <p>全局数据:{{ globalData }}</p>
</template>

<script>
export default {
  inject: ["message", "globalData"],
  data() {
    return {
      sonMessage: this.message,
    };
  },
};
</script>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---