跨组件传值

370 阅读1分钟

前提:除去父子、兄弟传值以外的组件之间传值都是跨组件传值 父组件使用provide 封装数据

<template>
  <div>
  ....
    <Books></Books>
  </div>
</template>
<script>
import Books from "./Books.vue";
export default {
  data() {
    return {
      Info: {
        theme: "aaaa",
      },
    };
  },
  provide() {
    return {
      theme: this.Info,
    };
  },
  components: {
    Books,
  },
};
</script>

任意层级的子组件使用inject来引用数据

<template>
  <h3>{{ theme.theme }}</h3>
</template>

<script>
export default {
  inject: ["theme"],
};
</script>

<style>
</style>