Vue2之使用provide和inject實現兩個不相干組件之間的通信

在Vue 2中以使用provide和inject來實現兩個不相干組件之間的通信。provide允許在祖先組件中提供數據，而inject允許后代組件在其祖先組件提供的數據中注入并使用它們。

1. 祖先組件中使用provide提供數據

祖先組件ancestor內容如下，在祖先組件中通過provide提供數據

<!-- Ancestor.vue -->
<template><div><DescendantA /><DescendantB /></div>
</template><script>
import Vue from 'vue';
import DescendantA from './DescendantA.vue';
import DescendantB from './DescendantB.vue';export default {components: {DescendantA,DescendantB},provide: {message: 'Hello World from Ancestor'}
};
</script>

2.后代組件A中使用inject注入并使用數據

<!-- DescendantA.vue -->
<template><div><p>Descendant Component A</p><p>{{ providedMessage }}</p></div>
</template><script>
export default {//注入 message 信息inject: ['message'],computed: {providedMessage() {//使用  return this.message;}}
};
</script>

3.后代組件B中使用inject注入并使用數據

<!-- DescendantB.vue -->
<template><div><p>Descendant Component B</p><p>{{ providedMessage }}</p></div>
</template><script>
export default {//注入 message 信息inject: ['message'],computed: {providedMessage() {//使用  return this.message;}}
};
</script>