Vue3神奇新法宝：provide与inject，组件通信不再愁

提供更多选项的Vue3

做网页的时候，软件变大之后，组件间的交流就变得特别关键。我之前用 Vue2 的时候，全靠 props 和 events 两个东西在传递信息。不过现在问题有点儿大，这些招数似乎不管用了。所以，就有了 Vue3 的全新版本，给出了解决组件间互动更简单的新办法！

依赖项注入系统provide和inject

// ParentComponent.vue

  

    
Parent Component
    
  


import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent!');
    provide('message', message);
    return {
      message
    };
  }
};

// ChildComponent.vue

  

    
Child Component
    Update Message
    
{{ message }}
  


import { inject } from 'vue';
export default {
  setup() {
    const message = inject('message');
    
    const updateMessage = () => {
      message.value = 'Updated message from child!';
    };
    return {
      message,
      updateMessage
    };
  }
};

想要共享数据？Vue3有个神奇法宝针对这个问题——provide和inject。它们就像桥梁连接道路，传输数据轻而易举。你只需要在provide里设定数据，然后各种组件在inject那里就能轻松获取。要是Data有什么变动，小鸡们能立刻感知并及时更新！

用React做项目，组件间要传值，那就快试试provide跟inject，这对黄金搭档会让代码简单明了，看着还舒坦呐，维护起来也更顺溜，清清楚楚看哪变量在哪儿游荡，修复bug也容易多了哦～

全局事件总线系统Event Bus

Vue3新添了个功能，叫做Event Bus，就像个全局广播电台似的。只要设置一下这个，你就可以跟现在一样用$on、$off和$emit这些方法来收发信号，连结组件间的烦恼都解决

全局事件总线这个东东超厉害的，就是你需要的那种和各种组件，包括那些和你没有直接关系的家伙说话的好帮手。比如说你想告诉你那个哥哥类型的组件出啥事了或者怎么干活，直接用这个总线就行！可是，因为大家都能用这个总线，所以要当心别搞混了不然可真是闹心！

提升开发效率与代码质量

这款Vue 3框架真心好用！它让搞插件就跟接电源似的简单，处理复杂的APP也没问题，码出的代码干净清爽又易读懂。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.config.globalProperties.$bus = createEventBus();
app.mount('#app');
// event-bus.js
import mitt from 'mitt';
export function createEventBus() {
  const bus = mitt();
  return {
    $on: bus.on,
    $off: bus.off,
    $emit: bus.emit
  };
}
// ParentComponent.vue

  

    
Parent Component
    Update Message
  


export default {
  methods: {
    updateMessage() {
      this.$bus.$emit('message-updated', 'Updated message from parent!');
    }
  }
};

// ChildComponent.vue

  

    
Child Component
    
{{ message }}
  


export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$bus.$on('message-updated', (newMessage) => {
      this.message = newMessage;
    });
  }
};

用vue3新功能搞项目，速度快得不要不要滴!没必要在小事儿上磨蹭半天，抓紧搞定主要事儿就对了。团队协作起来也顺畅多了，信息交流明明白白，防止bug就靠这招！

结语

说实话，vue 3比vue 2进步好多，搞得咱们前端玩家可以大展身手！新的依赖注入和全局事件总线系统简直打开了新世界的大门，看的咱们目瞪口呆！期待未来能用这些新功能做出牛逼爆表的前端应用，速度飞快、质量上乘且抗打击能力强悍！