加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

Vue组件间通信六种方式(完整版)

发布时间:2019-05-18 10:34:16 所属栏目:建站 来源:浪里行舟
导读:媒介 组件是 vue.js最强盛的成果之一,而组件实例的浸染域是彼此独立的,这就意味着差异组件之间的数据无法彼此引用。一样平常来说,组件可以有以下几种相关: 如上图所示,A 和 B、B 和 C、B 和 D 都是父子相关,C 和 D 是兄弟相关,A 和 C 是隔代相关(也许隔

一样平常来说,有两种步伐:

  • provide祖先组件的实例,然后在子孙组件中注入依靠,这样就可以在子孙组件中直接修改祖先组件的实例的属性,不外这种要领有个弱点就是这个实例上挂载许多没有须要的对象好比props,methods
  • 行使2.6最新API Vue.observable 优化相应式 provide(保举)

我们来看个例子:孙组件D、E和F获取A组件转达过来的color值,并能实现数据相应式变革,即A组件的color变革后,组件D、E、F不会随着变(焦点代码如下:)

Vue组件间通讯六种方法(完备版)

  1. // A 组件  
  2. <div> 
  3.       <h1>A 组件</h1> 
  4.       <button @click="() => changeColor()">改变color</button> 
  5.       <ChildrenB /> 
  6.       <ChildrenC /> 
  7. </div> 
  8. ...... 
  9.   data() { 
  10.     return { 
  11.       color: "blue" 
  12.     }; 
  13.   }, 
  14.   // provide() { 
  15.   //   return { 
  16.   //     theme: { 
  17.   //       color: this.color //这种方法绑定的数据并不是可相应的 
  18.   //     } // 即A组件的color变革后,组件D、E、F不会随着变 
  19.   //   }; 
  20.   // }, 
  21.   provide() { 
  22.     return { 
  23.       theme: this//要领一:提供祖先组件的实例 
  24.     }; 
  25.   }, 
  26.   methods: { 
  27.     changeColor(color) { 
  28.       if (color) { 
  29.         this.color = color; 
  30.       } else { 
  31.         this.color = this.color === "blue" ? "red" : "blue"; 
  32.       } 
  33.     } 
  34.   } 
  35.   // 要领二:行使2.6最新API Vue.observable 优化相应式 provide 
  36.   // provide() { 
  37.   //   this.theme = Vue.observable({ 
  38.   //     color: "blue" 
  39.   //   }); 
  40.   //   return { 
  41.   //     theme: this.theme 
  42.   //   }; 
  43.   // }, 
  44.   // methods: { 
  45.   //   changeColor(color) { 
  46.   //     if (color) { 
  47.   //       this.theme.color = color; 
  48.   //     } else { 
  49.   //       this.theme.color = this.theme.color === "blue" ? "red" : "blue"; 
  50.   //     } 
  51.   //   } 
  52.   // } 
  1. // F 组件  
  2. <template functional> 
  3.   <div class="border2"> 
  4.     <h3 :style="{ color: injections.theme.color }">F 组件</h3> 
  5.   </div> 
  6. </template> 
  7. <script> 
  8. export default { 
  9.   inject: { 
  10.     theme: { 
  11.       //函数式组件取值纷歧样 
  12.       default: () => ({}) 
  13.     } 
  14.   } 
  15. }; 
  16. </script> 

虽说provide 和 inject 首要为高阶插件/组件库提供用例,但假如你能在营业中纯熟运用,可以到达事半功倍的结果!

(编辑:湖南网)

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

热点阅读