组件间传参的六种方法----------provide与inject

此方法是祖孙之间进行数据传递。

app.vue

<template>
  <div>
    <router-link to="/fatherdom">FatherDom</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  provide() {
    return {
      data: this,
    };
  },
};
</script>

FatherDom.vue

<template>
  <div>
    <son-dom />
  </div>
</template>

<script>
import SonDom from "@/components/SonDom.vue";
export default {
  components: { SonDom },
  name: "FatherDom",
  data() {
    return {};
  },
  inject: ["data"],
  created() {
    console.log("FatherDom路由", this.data);
  },
};
</script>

sonChild.vue

<template>
  <div>
    <child-child />
  </div>
</template>

<script>
import ChildChild from "./ChildChild.vue";
export default {
  components: { ChildChild },
  name: "SonChild",
  inject: ["data"],
  created() {
    console.log("SonChild组件", this.data);
  },
};
</script>