父组件
// Parent.vue
<template><div><p>Parent Component</p><p>Count: {{ count }}</p><ChildComponent /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {count: 0};},provide() {return {getCount: () => this.count, // 提供一个获取计数器的方法incrementCount: () => {this.count++;} // 提供一个增加计数器的方法};}
};
</script>
通过 provide 方法提供了两个函数：getCount 和 incrementCount，分别用于获取和增加计数器的值
子组件
// ChildComponent.vue
<template><div><p>Child Component</p><p>Count from Parent: {{ parentCount }}</p><button @click="incrementParentCount">Increment Parent Count</button></div>
</template><script>
export default {inject: ['getCount', 'incrementCount'], // 注入父组件提供的方法data() {return {parentCount: 0};},mounted() {// 使用注入的方法和数据this.parentCount = this.getCount(); // 获取父组件的计数器值},methods: {incrementParentCount() {this.incrementCount(); // 调用父组件的增加计数器方法this.parentCount = this.getCount(); // 更新显示的计数器值}}
};
</script>
通过 inject: ['getCount', 'incrementCount'] 注入了父组件提供的方法 。
这个示例展示了如何通过 provide 和 inject 在 Vue.js 中实现跨组件的数据传递，而不需要通过 props 逐层传递数据，使得组件间的耦合度降低，同时提高了组件的灵活性。
