Vue组件间通信六种方式（完整版）

一般来说，有两种办法：

• provide祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如props，methods
• 使用2.6最新API Vue.observable 优化响应式 provide(推荐)

我们来看个例子：孙组件D、E和F获取A组件传递过来的color值，并能实现数据响应式变化，即A组件的color变化后，组件D、E、F不会跟着变(核心代码如下：)

// A 组件  
<div> 
      <h1>A 组件</h1> 
      <button @click="() => changeColor()">改变color</button> 
      <ChildrenB /> 
      <ChildrenC /> 
</div> 
...... 
  data() { 
    return { 
      color: "blue" 
    }; 
  }, 
  // provide() { 
  //   return { 
  //     theme: { 
  //       color: this.color //这种方式绑定的数据并不是可响应的 
  //     } // 即A组件的color变化后，组件D、E、F不会跟着变 
  //   }; 
  // }, 
  provide() { 
    return { 
      theme: this//方法一：提供祖先组件的实例 
    }; 
  }, 
  methods: { 
    changeColor(color) { 
      if (color) { 
        this.color = color; 
      } else { 
        this.color = this.color === "blue" ? "red" : "blue"; 
      } 
    } 
  } 
  // 方法二:使用2.6最新API Vue.observable 优化响应式 provide 
  // provide() { 
  //   this.theme = Vue.observable({ 
  //     color: "blue" 
  //   }); 
  //   return { 
  //     theme: this.theme 
  //   }; 
  // }, 
  // methods: { 
  //   changeColor(color) { 
  //     if (color) { 
  //       this.theme.color = color; 
  //     } else { 
  //       this.theme.color = this.theme.color === "blue" ? "red" : "blue"; 
  //     } 
  //   } 
  // } 

// F 组件  
<template functional> 
  <div class="border2"> 
    <h3 :style="{ color: injections.theme.color }">F 组件</h3> 
  </div> 
</template> 
<script> 
export default { 
  inject: { 
    theme: { 
      //函数式组件取值不一样 
      default: () => ({}) 
    } 
  } 
}; 
</script> 

虽说provide 和 inject 主要为高阶插件/组件库提供用例，但如果你能在业务中熟练运用，可以达到事半功倍的效果!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!