【Vue 开发实战】基础篇 # 12：常用高级特性provide/inject

<template>
  <div class="border">
    <h1>A 结点（第一级）</h1>
    <button @click="() => changeColor()">改变color</button>
    <ChildrenB />
    <ChildrenC />
    <ChildrenD />
  </div>
</template>
<script>
import ChildrenB from "./ChildrenB";
import ChildrenC from "./ChildrenC";
import ChildrenD from "./ChildrenD";
export default {
  components: {
    ChildrenB,
    ChildrenC,
    ChildrenD
  },
//   provide() {
//     return {
//       theme: {
//         color: this.color
//       }
//     };
//   },
  // 需要响应式数据 
  provide() {
    return {
      theme: this
    };
  },
  data() {
    return {
      color: "blue"
    };
  },
  methods: {
    changeColor(color) {
      if (color) {
        this.color = color;
      } else {
        this.color = this.color === "blue" ? "red" : "blue";
      }
    }
  }
};
</script>

<template>
  <div class="border2">
    <h3 :style="{ color: theme.color }">E 结点（第三级）</h3>
    <button @click="handleClick">改变color为green</button>
  </div>
</template>
<script>
export default {
  components: {},
  inject: {
    theme: {
      default: () => ({})
    }
  },
  methods: {
    handleClick() {
      if (this.theme.changeColor) {
        this.theme.changeColor("green");
      }
    }
  }
};
</script>

<template>
  <div class="border2">
    <h3 :style="{ color: theme1.color }">F 结点（第三级）</h3>
  </div>
</template>
<script>
export default {
  components: {},
  inject: {
    // 可以通过 from 命别名
    theme1: {
      from: "theme",
      default: () => ({})
    }
  }
};
</script>

<template functional>
  <div class="border2">
    <!-- 函数式组件使用injections -->
    <h3 :style="{ color: injections.theme.color }">I 结点（第三级）</h3>
  </div>
</template>
<script>
export default {
  inject: {
    theme: {
      default: () => ({})
    }
  }
};
</script>

<template>
  <div class="border1">
    <h2>C 结点（第二级）</h2>
    <ChildrenE />
    <ChildrenF />
  </div>
</template>
<script>
import ChildrenE from "./ChildrenE";
import ChildrenF from "./ChildrenF";
export default {
  components: {
    ChildrenE,
    ChildrenF
  },
  provide() {
    return {
      theme: {
        color: "green"
      }
    };
  }
};
</script>