建网站 技术,wordpress加图标,重庆市网站备案,建筑英才网招聘网父向子通信 1.定义props 子组件中#xff0c;定义期望接收的属性。例如#xff0c;在子组件的script部分#xff1a; export default {props: {message: String // 假设父组件要传递一个字符串类型的数据} } 2.传递数据 在父组件的模板中#xff0c;通过属性绑定的方式将…父向子通信 1.定义props 子组件中定义期望接收的属性。例如在子组件的script部分 export default {props: {message: String // 假设父组件要传递一个字符串类型的数据} } 2.传递数据 在父组件的模板中通过属性绑定的方式将数据传递给子组件。 templateChildComponent :messageparentMessage / /template 这里parentMessage是父组件的数据属性:message是将该数据绑定到子组件的message prop上。 子向父通信 1.触发事件 在子组件中当需要通知父组件时可以使用this.$emit触发一个自定义事件并可附带参数。 methods: {sendDataToParent() {this.$emit(child-event, { someData: Hello from child! });} } 2.监听事件 在父组件的模板中使用v-on或简写来监听子组件触发的事件并定义处理函数。 templateChildComponent child-eventhandleChildEvent / /templatescript export default {methods: {handleChildEvent(childData) {console.log(Received data from child:, childData);}} } /script 当子组件触发child-event时父组件的handleChildEvent方法会被调用并接收到子组件传递的数据 通过v-model简化代码 通过v-model父组件可以直接绑定一个变量到子组件的输入值而不需要显式地定义事件监听器或处理函数来更新数据。子组件通过监听内部的变动并发出input事件维持了这种双向绑定关系. //父组件 templatedivbase-select v-modelselectedCity/base-select/div /templatescript import BaseSelect from ./BaseSelect.vue;export default {components: {BaseSelect},data() {return {selectedCity: // 这个变量将与BaseSelect组件的选择值双向绑定};} }; /script //子组件 templateselect :valuevalue changehandleChange!-- 选项列表 --/select /templatescript export default {props: {value: String // 用来接收v-model绑定的值},methods: {handleChange(e) {this.$emit(input, e.target.value); // 当下拉选项变化时触发input事件并传递新值}} }; /script 注意 单向数据流: Vue推荐数据流动主要遵循单向数据流原则即数据从父组件流向子组件通过事件回调进行反向通信保持数据流向的清晰。避免直接修改Props: 子组件不应该直接修改接收到的props如果需要修改数据应该通过触发事件让父组件去处理。如果确实需要局部状态可以使用子组件的本地数据。 事件总线  1.创建Event Bus实例 创建一个Vue实例作为事件总线。这个实例并不用于渲染任何内容而是纯粹作为事件的中心枢纽 import Vue from vue; export const EventBus new Vue(); 2.发送事件发布 在发送事件的组件中使用EventBus.$emit方法触发一个事件并可以传递数据。 // 在某个组件中 import { EventBus } from ./eventBus.js;methods: {sendMessage() {EventBus.$emit(messageSent, { text: Hello from sender! });} } 3.监听事件订阅 需要接收事件的组件中使用EventBus.$on方法监听特定事件。 // 在另一个组件中 import { EventBus } from ./eventBus.js;mounted() {EventBus.$on(messageSent, this.receiveMessage); }, beforeDestroy() {// 为了避免内存泄漏记得在组件销毁前移除事件监听器EventBus.$off(messageSent, this.receiveMessage); }, methods: {receiveMessage(payload) {console.log(Received message:, payload.text);} } 注意 内存泄漏由于事件监听器可能长期存在务必在组件卸载时使用EventBus.$off移除不再需要的监听器以防止内存泄漏。代码可维护性随着应用复杂度增加过度依赖Event Bus可能导致代码难以理解和维护。对于大型应用可能需要转向使用Vuex这样的状态管理库来更系统地管理状态和事件。替代方案Vue 3引入了Composition API可以通过创建自定义组合API或使用第三方库如pinia来实现更灵活的状态管理和跨组件通信减少对Event Bus的依赖。 祖先向后代通信 1.在祖先组件中使用 provide 祖先组件中使用 provide 来提供数据或方法。provide 接收一个对象或返回对象的函数这个对象的属性将被注入到后代组件中。 // AncestorComponent.vue export default {provide() {return {message: Hello from ancestor,someMethod() {console.log(This method is provided by ancestor.);}};} }; 2. 在后代组件中使用 inject 后代组件使用 inject 来接收这些提供的数据或方法。可以直接注入具体的键名或者提供一个对象来配置注入行为。 // DescendantComponent.vue export default {inject: [message, someMethod],created() {console.log(this.message); // 输出: Hello from ancestorthis.someMethod(); // 输出: This method is provided by ancestor.} }; 或者使用对象形式进行更详细的配置 export default {inject: {message: { from: message }, // from 指定了要注入的属性名anotherNameForSomeMethod: { from: someMethod } // 甚至可以重命名注入的属性},created() {console.log(this.message); this.anotherNameForSomeMethod(); } }; 注意 层级限制provide 和 inject 只能在组件树的后代中生效不能跳过中间层获取数据。适用场景这种方式适用于那些深层次嵌套或不确定层次关系的组件间通信比如主题切换、全局配置等。替代方案对于复杂的应用考虑使用 Vuex 状态管理模式它能更高效、清晰地管理全局状态。