Vue组件通信新玩法，provide和inject让信息流动更畅快

了解 provide 和 inject

咱们平时用Vue时，常常是用组件让信息流动起来，这个步骤常见的就是借助props和emit两种方式。不过要是你家组件有点儿大的话，那你可能得同时派上 provide 和 inject 这俩家伙才行。

示例演示

打个比方，你家里像有位大叔级别的孙子（不在身边），还有他那可爱的3个弟弟，一个哥哥和他们的爸爸。想要告诉大叔，他们老爸（即Parent）那里藏了什么秘密么？很简单！

在 Parent 组件中使用 provide

很简单，就是把必要的信息传到父组件里头去！比如这样子，怎么样？

javascript
provide(){
  return {
  

    
  


import child1 from './child1.vue';
export default {
  components: {
    child1
  }
};

    message:'Hello from Parent'

  };
  

    
  


import child2 from './child2.vue';
export default {
  components: {
    child2
  }
};

}
  

    
{{message}}
    
  


import grandchild from './grandchild.vue';
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  components: {
    grandchild
  }
};


在 Grandchild 组件中使用 inject
然后，这个 Grandchild 组件就通过 inject 的方式拿到父级传来的消息~
inject:[‘message’]
搞定3部曲，小孙子孙女们可以顺利接收到父母发来的消息！
动态设置数据
  

    
  


export default {
  provide: {
    message: 'Hello Vue!'
  }
};


别以为我只是给个固定信息，其实还有很多花样能让数据变得更生动！比如说，Parent组件里的setMessage方法就厉害了，能够随心所欲地改变message里面的内容喔。
methods:{
  setMessage(newMessage){
  

    
{{message}}
  


export default {
  inject: ['message']
};


    this.message = newMessage;
}
在 Child1 中调用方法
走起！让我用下你家小孩函数中的setMessage给message加把火。
“来自孩子1的新消息，快查看！”
在 Grandchild 中注入方法
最后，咱们给Grandchild 装上setMessage这个功能！
  

    
  


export default {
  provide() {
    return {
      setMessage: message => {
        this.message = message;
      }
    };
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};


inject:[‘setMessage’]
现在可以了，子组件能直接修改父组件的内容，使用别名叫Parent那个组件的setMessage方法就能搞定！
注意事项
  

    
    Set Message
  


export default {
  props: ['setMessage'],
  data() {
    return {
      message: 'Hello World!'
    };
  }
};


别瞎折腾儿，给模块北京，别把事情弄得那么复杂，也别让大家修来补去累死。去掉程序中的废话，让人家好修理。想想看，如果再来个Vuex，咱们能解决更多的问题！
总结与展望
看完这段文字，你肯定会感叹：在Vue中，那个叫provide和inject的家伙竟然能把咱们的代码简化，降低依赖度，码农们简直越干越有劲儿，就好像打游戏那么过瘾。以后要给哪里传点东西什么的，千万别忘了试试这两个大神~
希望我刚才说的能帮到你关于Vue里的provide和inject，咱们还聊点儿啥子？
  

    
{{message}}
    Set Parent Message
  


export default {
  inject: ['setMessage', 'message']
};

。
			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/2024/04/14905.html，转载请注明出处~~~