父传子
方法一：
通过props传递
- 在父组件的模板中使用子组件，并通过属性绑定传值
- 在子组件中使用 props 接收数据
- 父组件的数据 parentValue 通过 :myProp 传递给子组件，子组件可以通过 this.myProp 访问这个值
javascript">// 父组件
<template><MyChild :myProp="parentValue" />
</template><script>
import MyChild from "./MyChild.vue";
export default {components: { MyChild },data() {return {parentValue: "Hello from parent!",};},
};
</script>javascript">// 子组件
export default {props: {myProp: {type: String,required: true,},},
};方法二：
在父组件中使用 `provide` 提供值，在子组件中使用 `inject` 注入值
javascript">// 父组件
<template><Child />
</template><script>
export default {provide() {return {sharedValue: this.sharedValue,};},data() {return { sharedValue: "初始值" };},
};
</script>javascript">// 子组件
<template><div>{{ sharedValue }}</div>
</template><script>
export default {inject: ["sharedValue"],
};
</script>
子传父
- 在子组件中使用 `$emit` 方法触发自定义事件，并传递数据
- 在父组件的模板中，使用 `v-on` 或 `@` 绑定子组件的事件
- 父组件通过事件处理函数接收子组件传来的数据
javascript">// 子组件
<template><button @click="sendValue">Send to Parent</button>
</template><script>
export default {methods: {sendValue() {this.$emit("childEvent", "Hello from child!");},},
};
</script>javascript">// 父组件
<template><MyChild @childEvent="handleChildEvent" />
</template><script>
import MyChild from "./MyChild.vue";
export default {components: { MyChild },methods: {handleChildEvent(value) {console.log(value); // 处理从子组件传来的值},},
};
</script>
兄弟组件通信
方法一：
使用 Event Bus（事件总线），适用于较小的应用
- 创建一个中央事件总线，用于兄弟组件之间的通信
- 组件A触发事件
- 组件B监听事件
- 移除监听事件（可选）
javascript">// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();javascript">// BrotherA.vue
import { EventBus } from './eventBus';EventBus.$emit('dataFromA', 'Hello from A');
javascript">// BrotherB.vue
import { EventBus } from './eventBus';EventBus.$on('dataFromA', (data) => {console.log(data);
});
为了避免在监听时，事件被反复触发，通常需要在页面销毁时移除监听事件；
或者在开发过程中，由于热更新，事件可能会被多次绑定监听，这时也需要移除事件监听
javascript">EventBus.$off('dataFromA');
也可以将EventBus绑定到vue实例的原型上，使用的时候就不用引入文件了，直接this.$EventBus
javascript">//main.js
Vue.prototype.$EventBus = new Vue();
方法二：
兄弟组件通过 `$emit` 向父组件发送事件，父组件更新状态并将新值传递给兄弟组件
方法三：
使用 Vuex 状态管理库，将共享状态存储在 Vuex 中，兄弟组件通过 Vuex 获取和更新状态（适用于大型应用）
父子组件共享一个值
javascript">// 父组件
<template><Child :curr-page.sync="currPage" />
</template><script>
export default {data() {return {currPage: 1,};},
};
</script>javascript">// 子组件
export default {props: {currPage: {type: Number,default: 1,}},data() {return {currentPage: this.currPage,}},watch: {currentPage() {this.$emit('update:currPage', this.currentPage);}}
};
