Vue Provide 和 Inject

<template>
  <div id="app">
    <div :class="theme">
      <button @click="changeFontSize">"第一層"字型變大</button>
      <FirstLayer ref="first" />
    </div>
  </div>
</template>
<script>
import FirstLayer from "./components/FirstLayer";
export default {
  name: "App",
  data() {
    return {
      myName: "ming",
      theme: "theme"
    };
  },
  provide() {
    return {
      myName: this.myName,
      changeBgColor: this.changeBgColor
    };
  },
  components: {
    FirstLayer
  },
  methods: {
    changeBgColor() {
      console.log("changeBgColor");
      this.theme = "dark-theme";
    },
    changeFontSize() {
      this.$refs.first.changeFontSize();
    }
  }
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.theme {
  padding: 40px;
}

.dark-theme {
  color: navy;
  background: black;
  padding: 40px;
}
</style>

<template lang="">
  <div class="first">
    <h1 v-bind:style="titleStyle">第一層</h1>
    <SecondLayer />
  </div>
</template>
<script>
import SecondLayer from "./SecondLayer";
export default {
  name: "FirstLayer",
  data() {
    return {
      fontSize: 2
    };
  },
  computed: {
    titleStyle() {
      return { color: "red", fontSize: `${this.fontSize}em` };
    }
  },
  components: {
    SecondLayer
  },
  methods: {
    changeFontSize() {
      this.fontSize += 0.1;
    }
  }
};
</script>
<style lang="">
.first {
  padding: 50px;
  background: #ffcece;
}
</style>

<template lang="">
  <div class="second">
    <h1>第二層</h1>
    <ThirdLayer />
  </div>
</template>
<script>
import ThirdLayer from "./ThirdLayer";
export default {
  name: "SecondLayer",
  components: {
    ThirdLayer
  }
};
</script>
<style lang="">
.second {
  padding: 50px;
  background: #7ddea0;
}
</style>

<template lang="">
  <div class="third">
    <h1>第三層</h1>
    <p>{{ myName }}</p>
    <button @click="changeFirstBgColor">變更背景</button>
  </div>
</template>
<script>
export default {
  name: "ThirdLayer",
  inject: ["myName", "changeBgColor"],
  methods: {
    //變更 App.vue 背景
    changeFirstBgColor() {
      this.changeBgColor();
    }
  },
  created() {
    console.log(this.myName); // injected value
  }
};
</script>
<style lang="">
.third {
  padding: 50px;
  background: #a8b5f4;
}
</style>