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

Posted 2022-09-19 凯小默

说明

【Vue 开发实战】学习笔记。

组件通信

provide/inject 底层通用组件用的很多。进行跨组件通信。

要实现组件 E 变化，更新 F、I

组件A

<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>

组件E

<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>

组件F：可以通过 from 命别名

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

组件I：函数式组件需要使用 injections

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

点击两个按钮改变颜色，三个子节EFI点都会颜色变化

如果在组件C 里添加 provide

<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>

EF节点不会变化，只有A节点的按钮点击了I节点才会变化颜色，这个跟冒泡很类似。就像在C节点阻止了冒泡事件一样

完整源码可以参考这个https://github.com/kaimo313/vue-development-practice/tree/master/vue-demo/src/views/demo12